/* Google Fonts import - primary source for cross-browser compatibility */
/* Open Sans is similar to Museo Sans and works in all browsers including Firefox */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
/* Primary Font: Museo Sans (Local files - may not work in Firefox) */
/* Fallback: Open Sans from Google Fonts, then system fonts */
/* Note: font-display: swap ensures text remains visible while fonts load */
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_100.otf') format('opentype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_100_Italic.otf') format('opentype');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_300.otf') format('opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_300_Italic.otf') format('opentype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_500.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_500_Italic.otf') format('opentype');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_700.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_700_Italic.otf') format('opentype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_900.otf') format('opentype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans';
src: url('../fonts/fonnts.com-Museo_Sans_900_Italic.otf') format('opentype');
font-weight: 900;
font-style: italic;
font-display: swap;
}
/* Museo Sans Rounded variants */
@font-face {
font-family: 'Museo Sans Rounded';
src: url('../fonts/fonnts.com-Museo_Sans_Rounded_100.otf') format('opentype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans Rounded';
src: url('../fonts/fonnts.com-Museo_Sans_Rounded_300.otf') format('opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans Rounded';
src: url('../fonts/fonnts.com-Museo_Sans_Rounded_500.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans Rounded';
src: url('../fonts/fonnts.com-Museo_Sans_Rounded_700.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans Rounded';
src: url('../fonts/fonnts.com-Museo_Sans_Rounded_900.otf') format('opentype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Museo Sans Rounded';
src: url('../fonts/fonnts.com-Museo_Sans_Rounded_1000.otf') format('opentype');
font-weight: 1000;
font-style: normal;
font-display: swap;
}
body,
html {
height: 100%;
width: auto;
overflow-x: hidden;
overflow-y: auto;
}
body {
display: flex;
flex-direction: column;
font-size: 12px !important;
}
.pro-sidebar:not(.collapsed) .nav-menu .submenu {
font-size: 12px !important;
width: 95%;
}
.nav-menu {
font-size: 13px;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Museo Sans", "Open Sans", Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 500;
}
#logo {
padding: 15px 0 15px 0;
margin: 0;
}
.filter-container {
width: 195px !important;
}
.clear-button-container {
margin-left: auto;
}
.container {
margin-top: 30px;
padding-bottom: 40px;
align-items: center;
}
@media (max-width: 1299px) {
.container {
width: auto !important;
/*max-width: 1200px !important;*/
}
}
@media (min-width: 1300px) {
.container {
max-width: 1315px !important;
}
}
@media (min-width: 1500px) {
.container {
width: 1415px !important;
}
}
/*Horizontal Navigation css*/
:root {
--sidebar-width: 220px;
--sidebar-width-adjust: 210px;
--sidebar-collapsed-width: 81px;
--sidebar-collapsed-width-adjust: 70px;
--primary-color: #457269; /*FSD Africa branding*/
--secondary-color: #40916C;
--main-green-color: #98C21F;
--visit-color: #C7DB87;
--hover-color: #52B788;
--text-primary: #ffffff;
--text-secondary: #D8F3DC;
--transition-speed: 0.3s;
--shadow-color: rgba(0, 0, 0, 0.1);
--border-radius: 8px;
--header-height: 70px;
}
@media (min-width: 1500px) {
:root {
/* Simplified and fixed calculations for better responsiveness */
--sidebar-width-adjust: 220px !important;
--sidebar-collapsed-width-adjust: 81px !important;
}
/* Fix container width to prevent overflow */
.container {
width: auto !important;
max-width: calc(100vw - 280px) !important; /* Account for sidebar + padding */
}
/* Fix main content container positioning and sizing */
.main-content > .container {
padding: 0 20px !important;
position: relative !important;
left: 0 !important; /* Remove problematic left positioning */
max-width: calc(100vw - 280px) !important; /* Responsive max-width */
width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.main-content.expanded > .container {
left: 0 !important; /* Remove problematic left positioning */
padding: 0 20px !important;
max-width: calc(100vw - 141px) !important; /* Account for collapsed sidebar + padding */
width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
}
@media (min-width: 1300px) and (max-width: 1499px) {
:root {
/* Simplified calculations */
--sidebar-width-adjust: 220px !important;
--sidebar-collapsed-width-adjust: 81px !important;
}
.main-content > .container {
max-width: calc(100vw - 280px) !important;
left: 0 !important;
padding: 0 20px !important;
width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.main-content.expanded > .container {
left: 0 !important;
padding: 0 20px !important;
max-width: calc(100vw - 141px) !important;
width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
}
/* Global Reset & Base Styles */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: "Museo Sans", "Open Sans", Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
background: #f8f9fa;
}
/* Prevent horizontal overflow */
html, body, .main-content, .container {
overflow-x: hidden;
}
/* Scrollbar Styling - Subtle and modern */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 3px;
transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
/* Suppress the browser default focus outline (the black ring) shown when links and buttons are clicked with
a mouse, app-wide. Keyboard users still get a focus ring via :focus-visible (accessibility), and any
element that sets its own outline via a class (e.g. .btn-clicked) is unaffected. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn-link:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
input[type="reset"]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
outline: none;
}
/* Breadcrumb Navigation */
.breadcrumb-nav {
background: transparent;
padding: 0.5rem 0;
}
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap; /* fix: wrap on small screens instead of overflowing */
margin: 0;
padding: 0;
list-style: none;
background: transparent;
gap: 15px;
row-gap: 8px;
}
.breadcrumb > li {
display: flex !important;
align-items: center;
}
.breadcrumb-item {
display: flex;
align-items: center;
color: #666;
font-size: 0.95rem;
line-height: 1.4;
position: relative;
padding: 0;
}
/* Original slash separator */
.breadcrumb-item + .breadcrumb-item::before {
content: '/';
position: absolute;
left: -17px;
color: #999;
font-size: 18px;
font-weight: 300;
line-height: 1;
}
/* Links - the original subtle green pill, kept */
.breadcrumb-item a {
color: var(--primary-color);
text-decoration: none;
display: flex;
align-items: center;
padding: 4px 10px;
border-radius: 6px;
transition: all 0.2s ease;
background: rgba(45, 106, 79, 0.05);
font-size: 0.85rem;
line-height: 1.3;
outline: none; /* fix: no black focus border on click */
}
.breadcrumb-item a:hover {
background: rgba(45, 106, 79, 0.1);
color: var(--primary-color);
}
.breadcrumb-item a:focus,
.breadcrumb-item a:active {
outline: none;
box-shadow: none;
}
.breadcrumb-item a i {
margin-right: 0.45rem;
font-size: 1rem; /* fix: icons no longer disproportionately small */
}
/* Active (current page) - the original filled pill, kept */
.breadcrumb-item.active {
background: var(--primary-color);
color: white;
padding: 4px 10px;
border-radius: 6px;
font-weight: 500;
font-size: 0.85rem;
line-height: 1.3;
}
/* Home icon sized to match the text and vertically centred */
.breadcrumb-item .fa-home {
font-size: 1rem; /* fix: was 1.1em of a 10px link = tiny */
line-height: 1;
}
/* Mobile: keep it readable, allow wrapping, tighten spacing */
@media (max-width: 576px) {
.breadcrumb {
gap: 12px;
row-gap: 6px;
}
.breadcrumb-item a,
.breadcrumb-item.active {
padding: 3px 8px;
font-size: 0.8rem;
}
.breadcrumb-item + .breadcrumb-item::before {
left: -14px;
font-size: 16px;
}
}
.project-info {
display: inline-flex;
align-items: center;
background: rgba(45, 106, 79, 0.08);
padding: 4px 12px;
border-radius: 20px;
margin-left: 12px;
font-size: 0.85rem;
color: var(--primary-color);
transition: all 0.2s ease;
}
.project-info:hover {
background: rgba(45, 106, 79, 0.12);
}
.project-info i {
margin-right: 6px;
font-size: 0.9em;
}
/* Responsive Design */
@media (max-width: 768px) {
.page-header-wrapper {
padding: 5px;
margin-bottom: 15px;
}
.breadcrumb {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 5px;
gap: 20px;
}
.breadcrumb::-webkit-scrollbar {
height: 3px;
}
.breadcrumb::-webkit-scrollbar-thumb {
background: rgba(45, 106, 79, 0.2);
border-radius: 3px;
}
.breadcrumb-item {
white-space: nowrap;
}
.breadcrumb-item {
font-size: 1rem; /* Slightly smaller font on mobile */
}
.breadcrumb-item + .breadcrumb-item {
}
.breadcrumb-item + .breadcrumb-item::before {
left: -13px;
font-size: 1.1rem;
}
}
/* Scrollbar Enhancement */
.pro-sidebar::-webkit-scrollbar {
width: 5px;
}
.pro-sidebar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.pro-sidebar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
/* Space management for expanded sidebar */
.pro-sidebar:not(.collapsed) .submenu {
margin-bottom: 5px !important;
}
/* Ensure consistent spacing after active submenus */
.menu-item.active {
margin-bottom: 2px;
}
/* Sidebar Core */
.pro-sidebar {
height: 102vh;
width: var(--sidebar-width);
position: fixed;
left: -8px;
top: -2px;
background: var(--primary-color);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: width, margin-left, transform;
box-shadow: 4px 0 10px var(--shadow-color);
z-index: 1000;
overflow-y: auto;
overflow-x: hidden;
}
.pro-sidebar.collapsed {
width: var(--sidebar-collapsed-width);
}
/* Sidebar Header */
.sidebar-header {
padding: 20px;
background: rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo Container */
.logo-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
transition: all var(--transition-speed) ease;
height: 30px;
}
.logo-link {
display: inline-block;
text-decoration: none;
}
.logo-link:hover {
opacity: 0.9;
}
.logo-container img.full-logo {
height: 35px;
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.logo-container img.small-logo {
height: 50px;
display: none;
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-container img {
height: 35px;
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-text {
color: var(--text-primary);
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
opacity: 1;
transition: opacity var(--transition-speed) ease;
}
/* Collapsed State Styles */
.collapsed .logo-container {
justify-content: center;
padding: 0;
}
.collapsed .logo-container img.full-logo {
display: none;
}
.collapsed .logo-container img.small-logo {
display: block;
margin-left: -10px;
}
.sidebar-collapsed .full-logo {
display: none;
}
.sidebar-expanded .small-logo {
display: none;
}
/* .collapsed .logo-container img {
height: 25px;
margin-left: -20px;
transform: scale(0.9);
}*/
.collapsed .logo-text {
opacity: 0;
width: 0;
display: none;
}
.sidebar-toggle-btn {
position: fixed;
left: calc(var(--sidebar-width) - 30px);
top: 69px;
width: 36px;
height: 36px;
background: white;
border: 2px solid var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.2s ease,
box-shadow 0.2s ease;
will-change: transform;
z-index: 9999;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.sidebar-toggle-btn i {
color: var(--primary-color);
font-size: 16px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease,
color 0.2s ease;
will-change: transform, opacity;
}
.sidebar-toggle-btn:hover {
background: var(--primary-color);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.sidebar-toggle-btn:hover i {
color: white;
}
.sidebar-toggle-btn:active {
transform: scale(0.95);
}
/* When sidebar is collapsed */
.collapsed .sidebar-toggle-btn {
left: calc(var(--sidebar-collapsed-width) - 30px);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Add transition classes for sidebar state changes */
.sidebar-transition {
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.content-transition {
transition: margin-left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
/* Enhanced transition for logo container */
.logo-container {
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
/* Ensure menu items have smooth transitions too */
.menu-text {
transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
width 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.menu-icon {
transition: margin 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* Intermediate screen sizes (tablets and small desktops) */
@media (min-width: 769px) and (max-width: 1600px) {
.sidebar-toggle-btn {
position: fixed;
left: calc(var(--sidebar-width) - 30px);
top: 69px;
z-index: 9999;
}
.collapsed .sidebar-toggle-btn {
left: calc(var(--sidebar-collapsed-width) - 30px);
}
}
/* Mobile screens */
@media (max-width: 768px) {
.sidebar-toggle-btn {
position: absolute;
left: 10px;
top: 80px;
z-index: 100;
}
.collapsed .sidebar-toggle-btn {
left: 10px;
}
}
/* Navigation Menu */
.collapsed .nav-menu {
padding-top: 30px;
}
.menu-link,
.submenu-item,
.profile-menu-item,
.profile-menu-item:hover,
.profile-menu-item:focus,
.profile-menu-item:active {
text-decoration: none !important;
}
.menu-link:hover,
.submenu-item:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
transform: translateX(3px);
}
.menu-item {
margin: 2px 2px 2px 12px;
border-radius: var(--border-radius);
position: relative;
}
.menu-link {
display: flex;
align-items: center;
padding: 12px 15px !important;
color: var(--text-secondary);
text-decoration: none !important;
border-radius: var(--border-radius);
transition: all var(--transition-speed) ease;
white-space: nowrap;
}
.form-select {
font-size: 1.4rem !important;
}
.menu-link:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
transform: translateX(3px);
text-decoration: none !important;
}
.menu-link.active {
background: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
font-weight: 500;
text-decoration: none !important;
}
/* Dropdown Indicator */
.menu-link.dropdown-toggle {
position: relative;
}
.menu-link.dropdown-toggle::after {
content: '';
position: absolute;
right: 1px;
top: 50%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--text-secondary);
transform: translateY(-50%);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.menu-link.dropdown-toggle:hover::after {
border-top-color: var(--text-primary);
}
.menu-link.dropdown-toggle::after {
transition: transform 0.3s ease;
}
/* Arrow rotation: ONLY rotate when submenu is actually expanded (has active class) */
/* has-active-page WITHOUT active = collapsed menu with current page = arrow NOT rotated */
.menu-item.has-active-page:not(.active) > .menu-link.dropdown-toggle::after,
.menu-link.dropdown-toggle.has-active-page:not(.active)::after {
transform: translateY(-50%) rotate(0deg) !important;
}
.menu-item.active > .menu-link.dropdown-toggle::after {
transform: translateY(-50%) rotate(-180deg);
}
.menu-link.dropdown-toggle.active::after {
transform: translateY(-50%) rotate(180deg);
}
.collapsed .menu-link.dropdown-toggle.active::after {
transform: translateY(-50%) rotate(-90deg);
}
.menu-icon {
width: 24px;
margin-right: 15px;
text-align: center;
font-size: 1.1em;
transition: margin var(--transition-speed) ease;
}
.menu-text {
opacity: 1;
transition: opacity var(--transition-speed) ease;
}
.collapsed .menu-text {
opacity: 0;
width: 0;
display: none;
}
.collapsed .menu-icon {
margin-right: 0;
}
/* Dropdown Menu */
.submenu {
margin: 5px 0 5px 2px !important;
max-height: 0;
background: var(--primary-color);
border-radius: var(--border-radius);
overflow: hidden;
transition: all var(--transition-speed) ease-in-out;
opacity: 0;
visibility: hidden;
display: none;
}
.submenu.active {
max-height: max-content !important;
opacity: 1;
visibility: visible;
display: inline-block;
margin: 5px !important;
}
.menu-item.clicked > .submenu,
.menu-item.active > .submenu {
opacity: 1;
visibility: visible;
}
.submenu-item {
display: flex;
position: relative;
align-items: center;
padding: 10px 10px;
color: var(--text-secondary);
text-decoration: none;
border-radius: var(--border-radius);
transition: all var(--transition-speed) ease;
font-size: 0.9em;
opacity: 0.8;
}
.submenu-item:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.submenu-item i {
width: 20px;
font-size: 0.9em;
}
/* Top Bar */
.top-bar {
position: fixed;
top: -2px;
right: 0;
left: 195px;
height: var(--header-height);
background: white;
box-shadow: 0 2px 10px var(--shadow-color);
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
transition: left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}
/* Mask to cover scrollbar behind header */
.top-bar::after {
content: '';
position: absolute;
top: 0;
right: -20px;
width: 20px;
height: 100%;
background: white;
z-index: 1000;
}
.collapsed ~ .top-bar {
left: 70px;
}
/* Profile Section */
.profile-section {
display: flex;
align-items: center;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
border-radius: 30px;
padding: 5px;
cursor: pointer;
position: relative;
}
.profile-toggle {
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
}
/* Update the profile menu to support hover */
.profile-menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 280px;
background: white;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.98);
transform-origin: top right;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.08);
z-index: 1000;
}
.profile-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.profile-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
text-align: center;
color: white;
}
/* Enhanced Profile Menu Styles */
.profile-info {
padding: 15px;
text-align: center;
background: linear-gradient(135deg, var(--primary-color), var(--primary-color));
}
.profile-menu-item.aspNetDisabled {
opacity: 1 !important;
}
.profile-menu-item.aspNetDisabled:hover {
background: rgba(45, 106, 79, 0.05);
border-left-color: var(--primary-color);
color: var(--primary-color);
}
.profile-avatar-large {
width: 70px;
height: 70px;
margin: 0 auto 15px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.3rem !important;
}
.profile-name {
font-size: 1.8rem;
font-weight: 600;
color: white;
margin-bottom: 12px;
display: block;
text-align: center;
}
.profile-role {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
padding: 6px 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
}
.profile-menu-items {
padding: 10px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.profile-menu-item {
padding: 12px 20px;
display: flex;
align-items: center;
gap: 12px;
color: #333;
transition: all var(--transition-speed) ease;
border-left: 3px solid transparent;
cursor: pointer;
}
.profile-menu-item:hover,
.profile-menu-item:focus {
background: rgba(45, 106, 79, 0.05);
border-left-color: var(--primary-color);
color: var(--primary-color);
}
.profile-menu-item i {
color: var(--primary-color);
width: 20px;
text-align: center;
}
.profile-menu-items a,
.profile-menu-items a:hover,
.profile-menu-items a:focus,
.profile-menu-items a:active,
.menu-link.active,
.submenu-item.active {
text-decoration: none !important;
}
.submenu-item.active {
background: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
font-weight: 500;
}
/* Main Content */
.main-content {
position: relative !important;
margin-left: var(--sidebar-width-adjust) !important;
margin-top: var(--header-height) !important;
padding: 8px !important;
min-height: calc(100vh - var(--header-height)) !important;
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: margin-left !important;
background: #f8f9fa !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: calc(100vw - var(--sidebar-width-adjust)) !important;
max-width: calc(100vw - var(--sidebar-width-adjust)) !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
.main-content.expanded {
margin-left: var(--sidebar-collapsed-width-adjust) !important;
width: calc(100vw - var(--sidebar-collapsed-width-adjust)) !important;
max-width: calc(100vw - var(--sidebar-collapsed-width-adjust)) !important;
}
.main-content > .container {
width: 100%;
max-width: 1315px;
padding: 0 30px;
margin: 0 auto;
position: relative;
left: calc((var(--sidebar-width) - 220px) / -2);
}
.main-content.expanded > .container {
left: calc((var(--sidebar-collapsed-width-adjust) - 81px) / -2);
}
/* Responsive adjustments */
@media (min-width: 1500px) {
.main-content > .container {
padding: 0 15px; /* Reduced from 30px */
position: relative;
left: -110px; /* Half of sidebar width */
max-width: 1450px; /* Increased to allow more content width */
}
.main-content.expanded > .container {
left: -40px; /* Half of collapsed sidebar width */
padding: 0 10px; /* Reduced padding */
max-width: 1650px; /* Increased max-width */
}
}
@media (min-width: 1300px) and (max-width: 1499px) {
.main-content > .container {
max-width: 1260px; /* Increased from 1200px */
left: -110px;
padding: 0 15px; /* Reduced from default */
}
.main-content.expanded > .container {
left: -40px;
padding: 0 10px; /* Reduced padding */
max-width: 1360px; /* Increased max-width */
}
}
@media (max-width: 1299px) {
.main-content > .container {
max-width: calc(100vw - 280px) !important;
padding: 0 20px !important;
left: 0 !important;
width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.main-content.expanded > .container {
left: 0 !important;
max-width: calc(100vw - 141px) !important;
width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
}
/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
.main-content {
margin-left: 0 !important;
padding: 10px !important;
width: 100vw !important;
max-width: 100vw !important;
}
.main-content.expanded {
margin-left: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
}
.main-content > .container,
.main-content.expanded > .container {
padding: 0 15px !important;
left: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
}
/* ADDITIONAL CONTAINER FIXES TO PREVENT OVERFLOW */
.container.main-content.content-ready.content-can-transition {
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* ENSURE ALL CHILD ELEMENTS RESPECT CONTAINER BOUNDS */
.main-content * {
box-sizing: border-box !important;
}
/* SPECIFIC FIX FOR ASP.NET CONTENT PLACEHOLDER */
#MainContent {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
.main-content {
margin-left: 0;
padding: 10px !important;
}
.main-content.expanded {
margin-left: 0;
}
.main-content > .container {
padding: 0 15px;
left: 0;
}
.main-content.expanded > .container {
left: 0;
}
}
/* Login Content Styles */
.login-content {
background: #f8f9fa;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.main-content {
margin-left: 0;
}
.main-content.expanded {
margin-left: 0;
}
.login-content {
padding: 15px;
}
}
.page-header-wrapper {
background: linear-gradient(to right, rgba(45, 106, 79, 0.03), rgba(64, 145, 108, 0.03));
padding: 5px 10px;
border-radius: 12px;
margin: 0;
border: 1px solid rgba(45, 106, 79, 0.08);
box-shadow: 0 2px 4px rgba(45, 106, 79, 0.02);
}
/* Page Title */
.page-header-title {
margin-bottom: 1px;
}
.page-header-title h1 {
color: var(--primary-color);
font-size: 12px;
font-weight: 600;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1px;
}
/* Collapsed State Dropdown */
.collapsed .menu-item {
position: relative;
}
.collapsed .menu-link.dropdown-toggle::after {
right: 10px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid var(--text-secondary);
border-right: 0;
transform: translateY(-50%);
}
.collapsed .menu-link.dropdown-toggle:hover::after {
border-left-color: var(--text-primary);
}
.collapsed .submenu {
position: fixed;
left: var(--sidebar-collapsed-width);
min-width: 220px;
background: var(--primary-color);
border-radius: 0 8px 8px 0;
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
padding: 10px;
margin: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
display: none;
overflow: hidden; /* Prevent horizontal scrollbar */
overflow-x: hidden !important; /* Force no horizontal scroll */
}
.collapsed .menu-item:hover > .submenu,
.collapsed .footer-nav-item:hover > .submenu {
display: block;
opacity: 1;
visibility: visible;
}
/* CRITICAL: In collapsed state, ensure ONLY the hovered submenu is visible */
/* Hide all submenus by default, only show on direct hover */
.collapsed .menu-item:not(:hover) > .submenu,
.collapsed .footer-nav-item:not(:hover) > .submenu {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Override active state in collapsed - don't auto-show active submenus */
.collapsed .menu-item.active:not(:hover) > .submenu,
.collapsed .footer-nav-item.active:not(:hover) > .submenu {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* CLICK-LOCK: Override hide rules when submenu is clicked open */
/* This allows submenus to stay visible after clicking even when not hovering */
.collapsed .menu-item > .submenu.submenu-click-locked,
.collapsed .footer-nav-item > .submenu.submenu-click-locked,
.collapsed .menu-item:not(:hover) > .submenu.submenu-click-locked,
.collapsed .footer-nav-item:not(:hover) > .submenu.submenu-click-locked,
.collapsed .menu-item.active:not(:hover) > .submenu.submenu-click-locked,
.collapsed .footer-nav-item.active:not(:hover) > .submenu.submenu-click-locked {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.collapsed .menu-item:hover > .menu-link {
background: var(--hover-color);
color: var(--text-primary);
}
.collapsed .submenu[data-position="bottom"] {
top: 0;
}
.collapsed .submenu[data-position="top"] {
bottom: 0;
top: auto;
}
.collapsed .submenu-item {
padding: 10px 15px;
margin: 5px 0;
border-radius: 6px;
opacity: 0.9;
display: flex;
align-items: center;
overflow: hidden; /* Prevent horizontal overflow */
text-overflow: ellipsis; /* Truncate long text */
max-width: 100%; /* Constrain to parent width */
white-space: nowrap;
text-decoration: none !important;
}
.collapsed .submenu-item i {
margin-right: 10px;
width: 20px;
text-align: center;
font-size: 0.9em;
}
.collapsed .submenu-item:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.1);
transform: translateX(3px);
}
/*.collapsed .submenu::after {
content: attr(data-title);
display: block;
padding: 8px 12px;
margin-bottom: 8px;
color: var(--text-primary);
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}*/
/* Active State Enhancement */
.menu-item.active > .menu-link {
background: var(--hover-color);
position: relative;
}
.menu-item.active > .menu-link::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 60%;
background: white;
border-radius: 0 2px 2px 0;
}
/* Nav click states — mouse click gets no outline, keyboard still does (WCAG). */
.menu-link:focus:not(:focus-visible),
.submenu-item:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.menu-link:focus-visible,
.submenu-item:focus-visible {
outline: 2px solid var(--hover-color, #6EC2EF);
outline-offset: 2px;
}
/* Pressed state — subtle background only, no transform. */
.menu-link:active,
.submenu-item:active {
background: rgba(255, 255, 255, 0.18);
}
/* Navigating state — applied on click until the page unloads. */
.menu-link.is-navigating,
.submenu-item.is-navigating {
background: var(--hover-color, #6EC2EF);
color: var(--text-primary, #ffffff);
pointer-events: none;
cursor: progress;
position: relative;
}
.menu-link.is-navigating::after,
.submenu-item.is-navigating::after {
content: '';
position: absolute;
right: 12px;
top: 50%;
width: 12px;
height: 12px;
margin-top: -6px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #ffffff;
border-radius: 50%;
animation: nav-spinner-rotate 0.8s linear infinite;
box-sizing: border-box;
}
@keyframes nav-spinner-rotate {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.menu-link.is-navigating::after,
.submenu-item.is-navigating::after {
animation-duration: 2s;
}
}
.collapsed .submenu::before {
content: '';
position: absolute;
left: -8px;
top: 15px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid var(--primary-color);
transform: translateX(-100%);
}
.submenu .submenu-item {
padding-left: 10px;
}
.submenu .submenu-item::before {
position: absolute;
left: 12px;
top: 50%;
width: 4px;
height: 4px;
background: var(--text-secondary);
border-radius: 50%;
transform: translateY(-50%);
opacity: 0.5;
transition: all 0.3s ease;
}
.submenu .submenu-item:hover::before {
opacity: 1;
background: var(--text-primary);
}
@media (max-width: 768px) {
/* Main content styles */
.main-content {
margin-left: auto !important;
width: 100% !important;
padding: 20px;
transition: none !important;
overflow: scroll;
}
/* Top bar styles */
.top-bar {
left: 0 !important;
width: 100%;
padding: 0 15px;
}
/* Sidebar base styles for mobile */
.pro-sidebar {
transform: translateX(-100%);
width: 80% !important;
max-width: 300px !important;
position: fixed !important;
height: 100vh !important;
top: 0 !important;
left: 0 !important;
z-index: 1050 !important;
background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
transition: transform 0.3s ease-in-out !important;
overflow-y: auto;
margin: 0;
}
/* Active state of sidebar */
.pro-sidebar.mobile-active {
transform: translateX(0);
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}
/* Mobile overlay */
.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1040;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-overlay.active {
display: block;
opacity: 1;
}
/* Mobile toggle button */
.mobile-nav-toggle {
display: flex !important;
position: fixed;
bottom: 20px;
right: 20px;
width: 48px;
height: 48px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
align-items: center;
justify-content: center;
z-index: 1060;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
/* Hide desktop sidebar button */
.sidebar-toggle-btn {
display: none !important;
}
/* Menu styles for mobile */
.nav-menu {
padding: 15px 0 !important;
}
.menu-item {
margin: 5px 15px !important;
}
.menu-text {
display: inline-block !important;
opacity: 1 !important;
width: auto !important;
}
.menu-icon {
margin-right: 15px !important;
width: 20px !important;
text-align: center !important;
}
/* Lock body scroll when sidebar is open */
body.mobile-nav-open {
overflow: hidden;
position: fixed;
width: 100%;
}
}
/* Report Status Styles */
.report-status {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.8em;
margin-left: 8px;
font-weight: 500;
}
.report-status.draft {
background: rgba(var(--warning-rgb, 255, 193, 7), 0.2);
color: var(--warning-color, #856404);
}
.report-status.submitted {
background: rgba(var(--info-rgb, 23, 162, 184), 0.2);
color: var(--info-color, #0c5460);
}
.report-status.approved {
background: rgba(var(--success-rgb, 40, 167, 69), 0.2);
color: var(--success-color, #155724);
}
.report-status.rejected {
background: rgba(var(--danger-rgb, 220, 53, 69), 0.2);
color: var(--danger-color, #721c24);
}
/* Project Info Badge Enhancement */
.project-info {
display: inline-flex;
align-items: center;
background: rgba(45, 106, 79, 0.1);
padding: 4px 12px;
border-radius: 20px;
margin-left: 15px;
font-size: 0.85rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.project-info:hover {
background: rgba(45, 106, 79, 0.15);
}
.project-info i {
margin-right: 6px;
font-size: 0.9em;
}
/* Footer Navigation Styles */
.footer-nav-separator {
margin-top: auto !important; /* Push to bottom */
margin-bottom: 25px !important;
margin-left: -1px !important;
margin-right: -1px !important;
}
/* Add a subtle glow effect to make it more visible */
.footer-nav-separator::after {
content: '';
position: absolute;
margin-top: 20px;
left: -7px;
right: -15px;
height: 2px;
background: #fff;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
color: white;
}
/* Ensure separator is visible in collapsed state */
.collapsed .footer-nav-separator {
margin: auto 5px 20px 5px;
}
.collapsed .footer-nav-separator {
margin-left: 5px;
margin-right: 5px;
}
.nav-menu {
position: relative;
display: flex;
flex-direction: column;
height: calc(100vh - 100px);
justify-content: space-between;
/* Keep this taller than .pro-sidebar (102vh) so the menu runs past the sidebar's bottom edge
and the footer items land against it. Matching the height instead leaves the menu ending
~2vh short, which reads as a large dead gap under the last item. */
min-height: calc(-100px + 105vh) !important;
}
.nav-menu > div:not(.footer-nav-separator):not(.footer-nav-item):not(.nav-spacer):not(.footer-expansion-spacer) {
flex: 0 0 auto;
}
/* Footer Menu Items Container */
.footer-section {
margin-bottom: 20px;
}
/* Footer Menu Item Specific Styles */
.footer-nav-item {
position: relative !important;
}
.footer-nav-item.active {
background: var(--secondary-color);
}
/* Enhanced submenu styles for footer items */
.footer-nav-item .submenu {
left: 100%;
min-width: 190px;
background: var(--primary-color);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
z-index: 1000;
max-height: 0;
overflow: hidden;
display: none;
}
.footer-nav-item.active .submenu {
max-height: max-content !important;
opacity: 1;
visibility: visible;
display: block;
overflow-y: auto;
padding: 8px 0;
}
.footer-nav-item .menu-link {
opacity: 0.9;
transition: all 0.3s ease;
}
.footer-nav-item .menu-link:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.1);
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.footer-nav-item:last-child .submenu,
.footer-nav-item:nth-last-child(2) .submenu {
bottom: -5px;
top: auto;
}
.footer-nav-item:not(:last-child):not(:nth-last-child(2)) .submenu {
top: 0;
}
/* Submenu Scrollbar Styling */
.footer-nav-item .submenu::-webkit-scrollbar {
width: 4px;
}
.footer-nav-item .submenu::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.footer-nav-item .submenu::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.footer-nav-item:nth-last-child(2) .submenu::after {
bottom: 20px;
border-color: transparent var(--primary-color) transparent transparent;
}
.footer-nav-item:not(:last-child):not(:nth-last-child(2)) .submenu::after {
top: 20px;
border-color: transparent var(--primary-color) transparent transparent;
}
.footer-nav-item .submenu.active {
animation: slideIn 0.3s ease forwards;
}
.menu-item + .menu-item {
margin-top: 2px;
margin-right: 5px;
}
.menu-item.active + .menu-item {
margin-top: 2px;
}
/* Base submenu styles */
.footer-nav-item .submenu {
margin-bottom: 0;
transition: all 0.3s ease;
}
/* Override negative margins for expanded sidebar footer items - enables downward expansion */
.pro-sidebar:not(.collapsed) .footer-nav-item {
margin-bottom: 0 !important;
}
.pro-sidebar:not(.collapsed) .footer-nav-item:last-child .submenu.active {
margin-bottom: 5px !important;
}
/* Specific styles for About navigation on laptop screens */
@media (min-width: 1024px) {
/* Target the last footer nav item (About) */
.footer-nav-item:last-child .submenu.active {
margin-bottom: 20px !important; /* Add significant bottom margin */
}
/* When sidebar is expanded */
.pro-sidebar:not(.collapsed) .footer-nav-item:last-child .submenu.active {
margin-bottom: 5px !important;
}
/* When sidebar is collapsed */
.pro-sidebar.collapsed .footer-nav-item:last-child .submenu {
margin-bottom: 65px !important;
max-height: calc(100vh - 350px); /* Adjust max height to account for margin */
}
}
/* Ensure proper spacing on smaller screens */
@media (max-width: 1023px) {
.footer-nav-item:last-child .submenu.active {
margin-bottom: 20px;
}
}
/* Additional positioning for About submenu */
.footer-nav-item:last-child .submenu {
bottom: auto; /* Override any automatic bottom positioning */
max-height: calc(100vh - 350px); /* Adjust for the new margin */
overflow-y: auto;
}
.menu-item.active {
background: var(--secondary-color);
}
/* Visual indicator for menu containing active page (when submenu is closed) */
.menu-item.has-active-page {
background: var(--secondary-color);
}
.menu-item.has-active-page > .menu-link {
background: var(--hover-color);
position: relative;
}
.menu-item.has-active-page > .menu-link::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: var(--accent-color, #3498db);
border-radius: 0 2px 2px 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.footer-nav-separator {
margin: 25px 15px 20px 15px;
background: linear-gradient( to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 100% );
}
.footer-nav-item {
margin-top: 20px !important;
}
/* Ensure footer stays at bottom on mobile */
.nav-menu {
justify-content: space-between;
}
}
/* Add these styles to your CSS */
.no-transition,
.no-transition * {
transition: none !important;
}
/* Update existing sidebar transitions */
.pro-sidebar {
transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
will-change: width;
}
.main-content {
transition: margin-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1), max-width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
will-change: margin-left, max-width;
}
/* Initial state handling */
.pro-sidebar.collapsed {
will-change: width;
}
.main-content.expanded {
will-change: margin-left, max-width;
}
/* Override any transition during page load */
.initial-load .pro-sidebar,
.initial-load .main-content {
transition: none !important;
}
/* Ensure clean state after postback */
.postback-complete .pro-sidebar,
.postback-complete .main-content {
transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1), margin-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url('../images/clocklanding.jpg') no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 5%;
padding-bottom: 10%;
}
.intro-message > h1 {
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
font-size: 5em;
color: #CC0000;
font-family: "Museo Sans", "Open Sans", Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
}
.intro-message > h2 {
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
font-size: 4em;
color: #000000;
font-family: "Museo Sans", "Open Sans", Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
font-weight: 700;
}
.intro-divider {
width: 90%;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
border-top-color: #000000;
}
.intro-message > h3 {
color: #A40000;
}
.modal-content {
border-style: none;
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
border-radius: 6px 6px 0px 0px;
}
.modal-header {
border-style: none;
background-color: #FF9933;
border-radius: 5px 5px 0px 0px;
}
.carousel {
border-style: ridge none none none;
border-width: 1px;
border-color: #669999;
}
.section-title {
padding-bottom: 70px;
padding-top: 30px;
}
.section-title h1 {
position: relative;
font-size: 36px;
margin-bottom: 24px;
padding-bottom: 22px;
text-transform: capitalize;
color: #009900;
}
.section-title h1 span {
font-weight: 300;
}
.section-title h1:before, .section-title h1:after {
content: "";
position: absolute;
left: 50%;
}
.section-title h1:before {
background-color: #e2e2e2;
bottom: 0;
height: 1px;
margin-left: -51px;
width: 102px;
}
.section-title h1:after {
width: 5px;
height: 5px;
bottom: -2px;
border-radius: 50%;
}
/*========================
====== Our Services ======
==========================*/
#our-services .col-sm-6.col-md-3 {
border-right: 1px solid #e2e2e2;
position: relative;
}
#our-services .col-sm-6.col-md-3:nth-of-type(4n) {
border-right: none;
}
#our-services .col-sm-6.col-md-3:nth-of-type(1), #our-services .col-sm-6.col-md-3:nth-of-type(2), #our-services .col-sm-6.col-md-3:nth-of-type(3), #our-services .col-sm-6.col-md-3:nth-of-type(4) {
border-bottom: 1px solid #e2e2e2;
}
#our-services .col-sm-6.col-md-3:nth-of-type(1):before, #our-services .col-sm-6.col-md-3:nth-of-type(2):before, #our-services .col-sm-6.col-md-3:nth-of-type(3):before {
position: absolute;
content: "";
right: -3px;
bottom: -3px;
width: 5px;
height: 5px;
z-index: 99;
border-radius: 50%;
}
.service-content {
padding: 45px 0 30px;
}
.service-content i {
font-size: 36px;
color: #009933;
}
.service-content h2 {
font-size: 18px;
font-weight: 500;
margin: 34px 0 18px;
}
.height {
height: 40px;
}
/*========================
=======our-clients ======
==========================*/
.our-clients {
border: 1px solid #339966;
padding: 45px 0;
margin-bottom: 25px;
}
.our-clients ul li {
display: inline-block;
width: 17.5%;
}
.our-clients ul li a img {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
opacity: 0.6;
}
.our-clients ul li a img:hover {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
opacity: 1;
}
/*========================
==== Contact Section =====
==========================*/
#contact {
padding-bottom: 62px;
}
#gmap {
height: 458px;
margin-bottom: 67px;
}
.contact-info i {
font-size: 36px;
}
.contact-info h2 {
font-size: 14px;
color: #838383;
font-weight: 700;
}
.contact-info a,
.contact-info span {
color: #838383;
font-size: 16px;
font-weight: 300;
}
.contact-info span {
}
#contact-form {
margin-top: 86px;
}
#contact-form h2 {
font-size: 22px;
color: #323232;
margin-bottom: 32px;
}
#contact-form h2 span {
font-weight: 300;
}
#contact-form input,
#contact-form textarea {
border: 1px solid #e0e0e0;
box-shadow: none;
margin-bottom: 25px;
height: 38px;
font-size: 16px;
}
#contact-form textarea {
height: 196px;
}
#contact-form button {
height: 40px;
width: 145px;
line-height: 40px;
padding: 0;
}
.form-control:focus,
#contact-form input:focus,
#contact-form textarea:focus {
border-color: #9d5468;
box-shadow: none;
}
/*========================
==== Footer Section ======
==========================*/
/* Footer Styles */
.footer {
flex-shrink: 0; /* Prevent the footer from shrinking */
background-color: #339933;
text-align: center;
position: relative;
}
.footer .links {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 63px;
min-width: 504px;
max-width: 100%;
font-size: 16px;
}
.footer .links .column {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
}
.footer .links .column h3 {
margin: 0;
font-size: 24px;
letter-spacing: 0.1em;
line-height: 34px;
font-weight: 600;
font-family: inherit;
color: #e6ea12;
display: inline-block;
min-width: 76px;
}
.footer .links .column div {
position: relative;
line-height: 34px;
font-weight: 500;
display: inline-block;
}
.text-widget p {
margin-bottom: 22px;
}
.social {
}
.social li {
margin: 0 10px;
}
.social li:first-child {
margin-left: 0;
}
.social li:last-child {
margin-right: 0;
}
.social li a {
color: #949494;
font-size: 20px;
}
.social li a:hover {
color: #339966;
}
.twitter-widget p:first-child {
margin-bottom: 15px;
}
.instagram-widget i {
font-size: 24px;
margin-right: 12px;
}
.instagram-widget p:first-child {
margin-bottom: 15px;
}
.instagram {
margin: 0 -8px;
}
.instagram li {
display: inline-block;
margin: 0 7.5px 20px;
}
.instagram li a {
display: block;
}
.instagram li a img {
width: 75px;
height: 75px;
border-radius: 50%;
}
.instagram li a {
position: relative;
}
.instagram li a:before {
position: absolute;
top: 0;
left: 0;
content: "";
z-index: 99;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.instagram li a:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.footer-bottom {
padding: 25px 0 15px;
background-color: #339933;
/*background-color: #339966;*/
}
.footer-bottom a, .footer-bottom div {
color: #fff;
}
.footer-bottom a:hover {
color: #000;
}
.footer-menu li {
padding: 0 20px;
}
.footer-menu li:first-child {
padding-left: 0;
}
.footer-menu li:last-child {
padding-right: 0;
}
.footer-menu li a {
font-size: 14px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.footer-menu li a:hover {
}
.copy-right p strong {
font-weight: 500;
}
.copy-right a {
color: #000;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.copy-right a:hover {
color: #fff;
}
@media(max-width: 1200px) {
.intro-message {
padding-bottom: 15%;
}
.intro-message > h1 {
font-size: 3em;
}
.intro-message > h2 {
font-size: 3em;
}
ul.intro-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons > li:last-child {
margin-bottom: 0;
}
.intro-divider {
width: 100%;
}
#logo {
text-align: center;
}
}
.dd_chk_select {
background-color: #5bc0de !important;
min-height: 33px !important;
border-color: #46b8da !important;
color: white !important;
display: inline-block;
padding: 5px 8px !important;
margin-bottom: 0 !important;
font-size: 13px !important;
font-weight: 400 !important;
padding-top: 7px !important;
font-family: inherit !important;
text-align: center !important;
border: 1px solid transparent !important;
border-radius: 1px !important;
background: url("data:image/svg+xml,") no-repeat !important;
background-position: calc(100% - 0.5rem) center !important;
background-size: 1.4rem 1.4rem !important;
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
padding-right: 2rem !important;
background-repeat: no-repeat !important;
}
.dd_chk_select2 {
background-color: #ffffff !important;
border: 1px solid black !important;
margin-top: 10px !important;
white-space: nowrap !important;
}
.dd_chk_select3 {
background-color: #ffffff !important;
white-space: nowrap !important;
color: black !important;
border: 1px solid black !important;
border-radius: 5px !important;
}
.green-background {
background-color: green !important;
white-space: nowrap !important;
}
.blue-background {
background-color: #5bc0de !important;
white-space: nowrap !important;
}
.clickable {
cursor: pointer;
text-decoration: underline;
}
.header-style {
background-color: #f5f5f5; /* Light gray */
font-weight: bold;
text-align: center;
}
.row-style {
background-color: #ffffff; /* White */
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.status-online {
background-color: green;
}
.status-offline {
background-color: red;
}
.custom-card-viz {
width: 170% !important;
margin-left: -262px !important;
}
.loading {
padding: 5px;
}
.loading img {
margin-left: 65px
}
/* Media query for small screens */
@media only screen and (max-width: 1299px) {
.resposive-gridview {
margin-right: -10px;
}
}
/* Media query for laptop screens */
@media only screen and (min-width: 1300px) and (max-width: 1499px) {
.dd_chk_select {
height: 20px !important;
text-align: center !important;
border-radius: 5px !important;
}
.resposive-gridview {
margin-right: -10px;
}
}
/* Media query for even larger screens */
@media only screen and (min-width: 1500px) {
.resposive-gridview {
margin-right: -10px;
}
}
/* FOOTER */
.footer {
background-color: #339933;
text-align: justify;
position: relative;
}
.footer .contain {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 5px 0;
}
.footer div {
padding: 5px 0;
color: #fff;
}
.footer a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.footer a:hover {
color: #ffcc00;
}
.footer .col {
height: auto;
box-sizing: border-box;
padding: 0px 20px 20px 20px;
margin-bottom: 10px;
}
.footer .col h1 {
margin: 0;
padding: 0;
font-family: inherit;
font-size: 14px;
line-height: 1.5;
padding: 20px 0px 5px 0px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.250em;
position: relative;
letter-spacing: 0.1em;
line-height: 34px;
font-weight: 600;
font-family: inherit;
color: #e6ea12;
display: inline-block;
min-width: 88px;
transition: color 0.3s;
}
.footer .col h1:hover {
color: #ffcc00;
}
.footer .col ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.footer .col ul li {
color: #999999;
font-size: 14px;
font-family: inherit;
font-weight: bold;
padding: 5px 0px;
cursor: pointer;
transition: color 0.2s;
}
.footer .col ul li:hover {
color: #ffffff;
transition: color 0.1s;
}
.clearfix {
clear: both;
}
.foot {
border-top: 1px solid #e2e2e2;
padding-top: 5px;
padding-bottom: 5px;
}
.custom-dropdown {
width: 201px;
}
.custom-dropdown_filters {
width: 180px;
}
.upload-file {
display: inline-block;
padding: 10px;
background-color: #f8f9fa; /* Light gray background color */
border: 2px dashed #ced4da; /* Dashed border */
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
margin-left: 5px;
}
.upload-file:hover {
background-color: #e9ecef; /* Lighter gray background color on hover */
border-color: #adb5bd; /* Lighter border color on hover */
}
/* Add some margin between the checkbox and label */
#onboardDiv input[type="checkbox"] {
margin-right: 10px;
}
.user-dropdown {
margin-top: -5px !important;
margin-right: -1.5px;
}
.user-info {
padding: 5px;
}
.user-details {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90% !important;
}
.user-name {
display: inline-block;
max-width: 150px;
text-overflow: ellipsis;
white-space: normal;
vertical-align: middle;
position: relative;
}
input[type="checkbox"] {
/* Add if not using autoprefixer */
-webkit-appearance: none;
/* Remove most all native input styles */
appearance: none;
/* For iOS < 15 */
background-color: var(--form-background);
/* Not removed via appearance */
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
border-radius: 0.15em;
transform: translateY(-0.075em);
display: inline-flex;
place-content: center;
}
input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transform-origin: bottom left;
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-control-color);
/* Windows High Contrast Mode */
background-color: CanvasText;
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
input[type="checkbox"]:focus {
outline: max(2px, 0.15em) solid currentColor;
outline-offset: max(2px, 0.15em);
}
input[type="checkbox"]:disabled {
--form-control-color: var(--form-control-disabled);
color: var(--form-control-disabled);
cursor: not-allowed;
}
/* th.filter {
background: url(../images/ShowFilter.png) right center no-repeat;
cursor: pointer;
padding: 4px 2px;
color: #fff;
border-left: solid 1.5px #FFFFFF;
font-weight: 600;
}*/
th.filter {
position: relative;
cursor: pointer;
padding: 4px 28px 4px 2px; /* Increased right padding to accommodate the icon */
color: #fff;
border-left: solid 1.5px #FFFFFF;
font-weight: 600;
}
th.filter::after {
content: "";
position: absolute;
right: 1px;
top: 85%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-color: #FFFFFF;
border-radius: 3px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
background-size: 75%;
background-repeat: no-repeat;
background-position: center;
}
/* th.filterExist {
background: url(../images/FilterExist.png) right center no-repeat;
cursor: pointer;
padding: 4px 2px;
color: #fff;
border-left: solid 1.5px #FFFFFF;
font-weight: 600;
}*/
th.filter, th.filterExist {
position: relative;
cursor: pointer;
padding: 4px 28px 4px 2px;
color: #fff;
border-left: solid 1.5px #FFFFFF;
font-weight: 600;
}
th.filter::after, th.filterExist::after {
content: "";
position: absolute;
right: 1px;
top: 75% !important;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: #FFFFFF;
border-radius: 3px;
background-repeat: no-repeat;
background-position: center;
}
th.filter::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
background-size: 70%;
}
th.filterExist::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-filter-check'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M11.18 20.274l-2.18 .726v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v3' /%3E%3Cpath d='M15 19l2 2l4 -4' /%3E%3C/svg%3E");
background-size: 75%;
}
.dataTables_wrapper .dataTables_paginate {
padding-top: 0.5em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
transition: all 0.3s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #6c757d;
color: white !important;
border-color: #6c757d;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: #007bff;
color: white !important;
border-color: #007bff;
}
.no-results-message {
margin-top: 20px;
padding: 20px;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
text-align: center;
}
.no-results-message .alert {
display: inline-block;
text-align: left;
}
.no-results-message i {
font-size: 1.2em;
margin-right: 10px;
}
.row.align-items-center {
margin: 0;
}
.text-primary {
color: #005A8B !important;
}
h2.text-primary {
font-size: 1.75rem;
font-weight: 600;
margin-top: 9px;
}
.search-container {
position: relative;
width: 250px;
}
.search-input {
padding-right: 30px;
padding-left: 35px;
height: 38px;
}
.search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
}
.btn-outline-secondary {
color: #005A8B;
border-color: #005A8B;
/*height: 38px;*/
display: flex;
align-items: center;
justify-content: center;
}
.btn-outline-secondary:hover {
color: #fff;
background-color: #005A8B;
border-color: #005A8B;
}
.col-md-6:last-child {
display: flex;
justify-content: flex-end;
}
@media (max-width: 767.98px) {
.row.align-items-center {
flex-direction: column;
}
.col-md-6 {
width: 100%;
margin-bottom: 1rem;
}
h2.text-primary {
text-align: center;
justify-content: center;
}
.col-md-6:last-child {
justify-content: center;
}
.d-flex.justify-content-end {
justify-content: center !important;
}
}
/* New styles to ensure alignment */
.d-flex.justify-content-end {
display: flex;
align-items: center;
gap: 10px;
}
.btn-outline-secondary {
white-space: nowrap;
}
/* Matches responsive-gridview.css. This file loads after it, so a different value silently wins. */
.title_container {
padding-bottom: 10px;
}
.report_title_seperator {
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
/* Common Tag Container Styles */
.tag-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px 0;
}
/* Country Tags */
.country-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 2px;
}
.country-tag {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #f0f9ff 0%, #e1f0fa 100%);
color: #0a558c;
padding: 4px 10px;
border-radius: 5px;
font-size: 12px;
font-weight: 500;
border: 1px solid #cce3f6;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.country-tag:hover {
background: linear-gradient(135deg, #e1f0fa 0%, #d3e7f7 100%);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transform: translateY(-1px);
}
/* Pillar Tags */
.pillar-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 2px;
}
.pillar-tag {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #e6f4ea 0%, #d7ebdc 100%);
color: #1e4620;
padding: 4px 10px;
border-radius: 5px;
font-size: 12px;
font-weight: 500;
border: 1px solid #c6e0cb;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pillar-tag:hover {
background: linear-gradient(135deg, #d7ebdc 0%, #c8e2ce 100%);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transform: translateY(-1px);
}
/* Tag States */
.pillar-tag-empty, .country-tag-empty {
background: #f8f9fa;
color: #6c757d;
border: 1px dashed #dee2e6;
font-style: italic;
}
/* Multiple Items Indicator */
.tag-counter {
background-color: #e9ecef;
color: #495057;
padding: 2px 6px;
border-radius: 12px;
font-size: 11px;
margin-left: 4px;
}
/* Tooltip Container */
.tag-tooltip {
position: relative;
display: inline-block;
}
.tag-tooltip .tooltip-content {
visibility: hidden;
position: absolute;
z-index: 99;
left: 50%;
transform: translateX(-63%);
background-color: #ffffff;
color: #212529;
text-align: left;
padding: 8px 12px;
border-radius: 6px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
border: 1px solid #dee2e6;
font-size: 12px;
min-width: 115px;
}
.tag-tooltip:hover .tooltip-content {
visibility: visible;
opacity: 1;
}
/* Max Height Container for Overflow */
.tags-container {
max-height: 80px;
overflow-y: auto;
padding-right: 4px;
}
.tags-container::-webkit-scrollbar {
width: 4px;
}
.tags-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.tags-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 2px;
}
.tags-container::-webkit-scrollbar-thumb:hover {
background: #666;
}
/* Add specific styles for the TabContainer */
.main-content #OneFSDAToCTabContainer {
width: 100% !important;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Media queries for responsiveness */
@media (min-width: 1300px) and (max-width: 1499px) {
.main-content {
padding: 10px 15px;
}
.main-content #OneFSDAToCTabContainer {
max-width: 1000px;
}
}
@media (max-width: 1299px) {
.main-content {
padding: 20px;
}
.main-content #OneFSDAToCTabContainer {
max-width: 100%;
padding: 0 15px;
}
}
/* Container adjustments */
.ajax__tab_xp .ajax__tab_body {
width: 100% !important;
box-sizing: border-box;
padding: 20px;
border: 1px solid #ddd;
border-radius: 0 0 4px 4px;
}
/* Make sure the UserControl is responsive */
.ToC_Report_UC {
width: 100%;
max-width: 100%;
overflow-x: auto;
}
.daisy-ai-container {
margin-right: 1rem;
position: relative;
z-index: 100;
}
.daisy-ai-container + .nyala-facility-container {
margin-left: 0.5rem;
}
/* Link Styling - matching Nyala style */
.daisy-ai-link {
display: flex;
align-items: center;
padding: 5px 10px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none !important;
border: 1px solid rgba(16, 185, 129, 0.15);
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.06);
}
.daisy-ai-link:hover {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.08) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}
/* Icon Wrapper */
.ai-icon-wrapper {
position: relative;
width: 36px;
height: 36px;
margin-right: 12px;
}
.ai-icon-main {
position: relative;
width: 100%;
height: 100%;
z-index: 3;
border-radius: 10px;
overflow: hidden;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.daisy-ai-icon {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.daisy-ai-link:hover .daisy-ai-icon {
transform: scale(1.08);
}
/* Glowing Ring Effect */
.ai-icon-ring {
position: absolute;
inset: -2px;
border-radius: 12px;
border: 2px solid transparent;
background: linear-gradient(135deg, #10b981, #059669) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transform: scale(1.1);
transition: all 0.3s ease;
}
.daisy-ai-link:hover .ai-icon-ring {
opacity: 1;
transform: scale(1);
}
/* Live status dot */
.ai-status-dot {
position: absolute;
bottom: -2px;
right: -2px;
width: 10px;
height: 10px;
background: #10b981;
border-radius: 50%;
border: 2px solid white;
z-index: 10;
animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
}
50% {
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
}
}
/* Content Styling - Stacked vertically */
.daisy-ai-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.daisy-ai-text {
color: #2d3748;
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.01em;
line-height: 1.2;
}
/* Badge Container */
.ai-badge-container {
position: relative;
}
/* Badge Styling */
.ai-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 2px 8px;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
position: relative;
z-index: 2;
}
/* Sparkle icon animation */
.ai-sparkle {
font-size: 0.75rem;
animation: sparkle-twinkle 1.2s ease-in-out infinite;
display: inline-block;
}
@keyframes sparkle-twinkle {
0%, 100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
50% {
opacity: 0.5;
transform: scale(0.8) rotate(15deg);
}
}
/* Animations */
@keyframes particle-float {
0% {
transform: translateY(0) scale(0);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateY(-20px) scale(1);
opacity: 0;
}
}
/* Mobile Adaptations */
@media (max-width: 768px) {
.daisy-ai-text {
display: none;
}
.daisy-ai-link {
padding: 8px;
}
.ai-icon-wrapper {
margin-right: 6px;
}
.ai-badge {
font-size: 0.65rem;
padding: 2px 6px;
}
.ai-sparkle {
display: none;
}
}
/* ===== NYALA FACILITY QUICK LINK — COMPACT CHIP ===== */
.nyala-facility-container {
margin-right: 0.6rem;
position: relative;
z-index: 100;
}
/* Compact tenant-switch chip: small logo + a two-line "Nyala Facility / DIMIS" lockup. */
.nyala-facility-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 5px; /* matches Daisy AI pill so the two are the same height */
background: #ffffff;
border: 1px solid #e3e8ee;
border-radius: 12px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
text-decoration: none !important;
}
.nyala-facility-link:hover {
border-color: #bcd6e8;
box-shadow: 0 2px 8px rgba(31, 77, 107, 0.12);
}
.nyala-icon-wrapper {
position: relative;
width: 36px;
height: 36px;
flex-shrink: 0;
}
.nyala-icon-main {
width: 100%;
height: 100%;
border-radius: 9px;
overflow: hidden;
background: #f5f8fb;
display: flex;
align-items: center;
justify-content: center;
}
.nyala-facility-icon {
width: 100%;
height: 100%;
object-fit: contain;
}
.nyala-icon-ring {
display: none;
}
.nyala-facility-content {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
line-height: 1.12;
}
.nyala-facility-text {
color: #1f4d6b;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.01em;
white-space: nowrap;
}
.nyala-facility-sub {
color: #8194a3;
font-weight: 600;
font-size: 0.55rem;
letter-spacing: 0.09em;
text-transform: uppercase;
white-space: nowrap;
}
.nyala-badge-container,
.nyala-badge,
.nyala-badge-glow {
display: none;
}
/* On small screens collapse to just the logo (label hidden), keeping it tappable. */
@media (max-width: 768px) {
.nyala-facility-content {
display: none;
}
.nyala-facility-link {
padding: 5px;
gap: 0;
}
.nyala-icon-wrapper {
width: 32px;
height: 32px;
}
}
/* ===== GLOBAL SEARCH FUNCTIONALITY STYLES ===== */
.global-search-container {
flex: 1;
max-width: 600px;
margin: 0 2rem;
position: relative;
z-index: 1000;
}
.search-input-wrapper {
position: relative;
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(52, 152, 219, 0.1);
border-radius: 14px;
display: flex;
align-items: center;
height: 48px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
backdrop-filter: blur(10px);
}
.search-input-wrapper:focus-within {
border-color: rgba(52, 152, 219, 0.3);
box-shadow: 0 4px 20px rgba(52, 152, 219, 0.1);
transform: translateY(-1px);
}
.search-icon {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
color: #7f8fa6;
font-size: 1.1rem;
transition: color 0.3s ease;
z-index: 2;
}
.search-input-wrapper:focus-within .search-icon {
color: #3498db;
}
.global-search-input {
flex: 1;
border: none;
outline: none;
padding: 14px 40px 14px 45px;
background: transparent;
font-size: 1rem;
color: #2d3748;
font-weight: 500;
}
.global-search-input::placeholder {
color: #a0aec0;
font-weight: 400;
}
.search-clear {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
color: #a0aec0;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.search-clear:hover {
color: #e53e3e;
background: rgba(229, 62, 62, 0.1);
}
/* Search Results Dropdown */
.search-results-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(0, 0, 0, 0.08);
margin-top: 8px;
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
z-index: 1001;
}
.search-loading {
padding: 20px;
text-align: center;
color: #7f8fa6;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.search-loading i {
font-size: 1.2rem;
color: #3498db;
}
.search-results-content {
max-height: 350px;
overflow-y: auto;
}
.search-result-category {
padding: 12px 20px 8px;
font-weight: 600;
font-size: 0.85rem;
color: #7f8fa6;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(52, 152, 219, 0.02);
}
.search-result-item {
padding: 14px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 12px;
}
.search-result-item:hover {
background: rgba(52, 152, 219, 0.05);
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.search-result-icon.project {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}
.search-result-icon.report {
background: linear-gradient(135deg, #f39c12, #e67e22);
color: white;
}
.search-result-icon.indicator {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
}
.search-result-icon.user {
background: linear-gradient(135deg, #8e44ad, #7d3c98);
color: white;
}
.search-result-icon.page {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}
.search-result-content {
flex: 1;
min-width: 0;
}
.search-result-title {
font-weight: 600;
color: #2d3748;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-subtitle {
font-size: 0.85rem;
color: #7f8fa6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-path {
font-size: 0.75rem;
color: #a0aec0;
margin-top: 2px;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-no-results {
padding: 40px 20px;
text-align: center;
color: #7f8fa6;
}
.search-no-results i {
font-size: 2rem;
margin-bottom: 12px;
opacity: 0.5;
}
.search-no-results span {
display: block;
font-weight: 500;
margin-bottom: 4px;
}
.search-no-results small {
font-size: 0.8rem;
opacity: 0.7;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.global-search-container {
margin: 0 1rem;
max-width: none;
}
.global-search-input {
font-size: 0.9rem;
padding: 12px 6px 12px 0;
}
.search-icon {
margin-left: 12px;
margin-right: 8px;
}
.search-clear {
margin-left: 6px;
margin-right: 12px;
}
.search-results-dropdown {
max-height: 300px;
}
.search-result-item {
padding: 12px 16px;
}
.search-result-icon {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
}
/* Animation for dropdown appearance */
@keyframes searchDropdownFadeIn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.search-results-dropdown.show {
animation: searchDropdownFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Search Result Highlighting */
.search-result-item mark {
background: #fef08a;
color: #92400e;
padding: 1px 3px;
border-radius: 3px;
font-weight: 600;
}
.profile-user-info {
position: relative;
}
/* Add hover behavior to show menu */
.profile-user-info:hover .profile-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Ensure menu stays visible when hovering over it */
.profile-menu:hover {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Enhanced Profile Toggle/Avatar Container */
.profile-toggle {
position: relative;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Outer Glow Ring */
.profile-toggle::before {
content: '';
position: absolute;
inset: -3px; /* Slightly larger than the avatar */
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
/* Inner White Ring */
.profile-toggle::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
background: white;
z-index: 1;
}
/* Main Avatar */
.profile-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-color));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 500;
font-size: 1.1rem;
position: relative;
z-index: 2;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover Effects */
.profile-toggle:hover {
transform: scale(1.05);
}
.profile-toggle:hover::before {
opacity: 0.2;
filter: blur(4px);
transform: scale(1.1);
}
.profile-toggle:hover .profile-avatar {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.profile-menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 280px;
background: white;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.98);
transform-origin: top right;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.08);
z-index: 1000;
pointer-events: none; /* Prevent interaction when hidden */
}
.profile-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: all; /* Enable interaction when visible */
}
/* Ensure smooth transitions */
.profile-toggle {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Enhanced Profile Header */
.profile-header {
padding: 1px;
background: linear-gradient(to bottom, rgba(var(--primary-color), 0.05) 0%, rgba(var(--primary-color), 0.02) 100%);
position: relative;
overflow: hidden;
margin: -2px;
}
/* Large Avatar in Menu */
.profile-avatar-large {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
transition: transform 0.3s ease;
}
.profile-avatar-large:hover {
transform: scale(1.05);
}
/* Enhanced User Info */
.profile-user {
margin-bottom: 8px;
}
.profile-name {
display: block;
font-size: 1.1rem;
font-weight: 600;
color: #1a202c;
margin-bottom: 4px;
transition: transform 0.3s ease;
}
.profile-role {
display: block;
font-size: 1.0rem;
color: #FBFAF3;
opacity: 0.9;
}
/* Menu Items */
.profile-menu-items {
padding: 8px 0;
}
.profile-menu-item {
display: flex;
align-items: center;
padding: 12px 24px;
color: #4a5568;
text-decoration: none;
transition: all 0.2s ease;
position: relative;
}
.profile-menu-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
opacity: 0;
transform: scaleY(0);
transition: all 0.2s ease;
}
.profile-menu-item:hover {
background: rgba(var(--primary-color-rgb), 0.05);
color: var(--primary-color);
}
.profile-menu-item:hover::before {
opacity: 1;
transform: scaleY(1);
}
.profile-menu-item i {
margin-right: 12px;
font-size: 1rem;
width: 20px;
text-align: center;
transition: transform 0.2s ease;
}
.profile-menu-item:hover i {
transform: scale(1.1);
color: var(--primary-color);
}
/* Animation for menu opening */
@keyframes menuSlideIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.profile-menu.active {
animation: menuSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (max-width: 768px) {
.top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999 !important; /* Above mobile menu but below toggle */
background: #ffffff;
padding: 12px 20px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.page-header-wrapper {
min-width: 0;
}
.page-header-title h1 {
font-size: 11px;
margin: 0;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
/* Adjust main content positioning */
.main-content {
padding-top: 60px; /* Offset for fixed top bar */
}
/* Mobile Navigation Wrapper */
.mobile-nav-wrapper {
display: block;
position: fixed;
z-index: 9998; /* Below top bar */
}
/* Mobile Navigation Toggle */
.mobile-nav-toggle {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: var(--primary-color);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
cursor: pointer;
transition: all 0.3s ease;
z-index: 10000;
}
/* Hamburger Icon */
.toggle-icon {
display: inline-block;
width: 24px;
height: 16px;
position: relative;
}
.toggle-icon span {
position: absolute;
height: 3px;
width: 100%;
background: white;
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: all 0.25s ease-in-out;
}
.toggle-icon span:nth-child(1) {
top: 0;
}
.toggle-icon span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.toggle-icon span:nth-child(3) {
bottom: 0;
}
/* Active Toggle State */
.mobile-nav-toggle.active .toggle-icon span:nth-child(1) {
top: 50%;
transform: rotate(45deg);
}
.mobile-nav-toggle.active .toggle-icon span:nth-child(2) {
opacity: 0;
}
.mobile-nav-toggle.active .toggle-icon span:nth-child(3) {
bottom: 50%;
transform: rotate(-45deg);
}
/* Mobile Menu Container */
.mobile-menu-container {
position: fixed;
top: 0;
right: 100%; /* Change from left:100% to right:100% */
left: auto; /* Ensure left is not set */
width: 100%;
height: 100%;
background-color: var(--primary-color);
transition: transform 0.4s cubic-bezier(0.75, 0, 0.25, 1);
overflow-y: auto;
z-index: 9998;
padding: 80px 20px 20px;
}
.menu-open .mobile-menu-container {
transform: translateX(100%); /* Change from translateX(-100%) to translateX(100%) */
}
/* Adjust mobile menu container position */
.mobile-menu-container {
top: 20px; /* Start below top bar */
height: calc(100% - 20px); /* Account for top bar */
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2); /* Add shadow on right side */
}
/* Mobile Menu Content */
.mobile-menu-content {
max-width: 600px;
margin: 0 auto;
}
/* Menu Items */
.mobile-menu-content .menu-item {
margin-bottom: 10px;
}
.mobile-menu-content .menu-link {
display: flex;
align-items: center;
color: white;
padding: 15px;
text-decoration: none;
background: rgba(255,255,255,0.1);
border-radius: 8px;
transition: background 0.3s ease;
}
.mobile-menu-content .menu-link:hover {
background: rgba(255,255,255,0.2);
}
.mobile-menu-content .menu-icon {
margin-right: 15px;
color: white;
}
/* Dropdown Styles */
.mobile-menu-content .menu-link.dropdown-toggle {
position: relative;
}
.mobile-menu-content .menu-link.dropdown-toggle::after {
content: '';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
transition: transform 0.3s ease;
}
.mobile-menu-content .menu-link.dropdown-toggle.active::after {
transform: translateY(-50%) rotate(180deg);
}
/* Submenu Styles */
.mobile-menu-content .submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.3s ease;
opacity: 0;
}
.mobile-menu-content .submenu.active {
max-height: 1000px;
opacity: 1;
}
.mobile-menu-content .submenu-item {
padding: 12px 15px;
background: rgba(255,255,255,0.05);
color: white;
text-decoration: none;
display: flex;
align-items: center;
transition: background 0.3s ease;
}
.mobile-menu-content .submenu-item:hover {
background: rgba(255,255,255,0.1);
}
.mobile-menu-content .submenu-item i {
margin-right: 10px;
color: white;
}
/* Mobile Menu Container */
.mobile-menu-container {
top: 20px; /* Start below top bar */
height: calc(100% - 20px); /* Account for top bar */
}
/* Adjust menu padding */
.mobile-menu-container {
padding: 30px 20px 20px;
}
/* Better contrast for menu items */
.mobile-menu-content .menu-link {
background: rgba(255,255,255,0.15);
}
/* Enhanced dropdown indicators */
.mobile-menu-content .menu-link.dropdown-toggle::after {
border-top-width: 6px;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Smooth transitions for submenus */
.mobile-menu-content .submenu {
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
/* Body State */
body.mobile-nav-active {
overflow: hidden;
}
}
/* Responsive Debugging Styles */
@media (max-width: 768px) {
/* Ensure full-width layout */
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Additional Mobile Optimization */
* {
-webkit-tap-highlight-color: transparent !important;
touch-action: manipulation !important;
}
}
@media (max-width: 768px) {
.submenu {
background: rgba(255, 255, 255, 0.05) !important;
border-left: 3px solid var(--primary-color);
margin: 8px 0 8px 12px;
border-radius: 8px 0 0 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.submenu-item {
position: relative;
padding: 14px 20px !important;
margin: 4px 8px;
border-radius: 6px;
background: transparent;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 14px;
border: 1px solid transparent;
}
.submenu-item i, .submenu-item .ph {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.1);
padding: 5px;
border-radius: 6px;
}
.submenu-item span {
font-size: 0.95rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.submenu-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
transform: translateX(4px);
}
.submenu-item:hover i {
background: rgba(255, 255, 255, 0.15);
}
.submenu-item::after {
content: '';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transition: all 0.2s ease;
}
.submenu-item:hover::after {
background: var(--primary-color);
box-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.4);
}
/* Active state differentiation */
.submenu.active {
border-left-color: rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.15) !important;
display: contents;
}
/* Hierarchy indicators */
.submenu .submenu {
margin-left: 28px;
border-left-width: 2px;
opacity: 0.9;
}
}
/* Responsive Top Bar Elements */
@media (max-width: 480px) {
.top-bar {
padding: 12px 15px;
}
.page-header-title h1 {
font-size: 1.1rem;
}
.daisy-ai-text {
display: none;
}
}
.mobile-nav-wrapper {
display: none; /* Hidden by default */
}
/* Show only on mobile */
@media (max-width: 767.98px) {
.mobile-nav-wrapper {
display: block;
}
/* Hide regular sidebar on mobile */
#sidebar {
display: none;
}
}
/* Mobile Styles */
@media (max-width: 768px) {
.top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
z-index: 1050;
}
.mobile-logo-container {
display: flex;
align-items: center;
height: 100%;
padding: 8px 0;
}
.mobile-logo-container img {
height: 40px;
width: auto;
object-fit: contain;
}
.page-header-wrapper {
background: linear-gradient(to right, rgba(45, 106, 79, 0.03), rgba(64, 145, 108, 0.03));
border-radius: 8px;
border: 1px solid rgba(45, 106, 79, 0.08);
box-shadow: 0 2px 4px rgba(45, 106, 79, 0.02);
margin: 0 10px;
padding: 5px 10px;
min-width: 0;
}
.page-header-title h1 {
font-size: 1.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
color: var(--primary-color);
}
.top-bar-right {
display: flex;
align-items: center;
gap: 12px;
}
.daisy-ai-container {
margin: 0;
}
.daisy-ai-link {
padding: 4px 8px;
}
.profile-section {
margin-left: 8px;
margin-right: 0px !important;
}
.profile-toggle {
width: 36px;
height: 36px;
}
.breadcrumb-nav {
display: block;
padding: 2px 0 0 0;
}
.breadcrumb {
gap: 15px;
font-size: 0.85rem;
}
.breadcrumb-item + .breadcrumb-item::before {
left: -12px;
font-size: 14px;
}
.breadcrumb-item a {
padding: 2px 4px;
font-size: 0.85rem;
}
.breadcrumb-item.active {
padding: 2px 8px;
font-size: 0.85rem;
}
/* Main content adjustment for mobile */
.main-content {
padding-top: 70px;
}
}
/* Collapsed Sidebar State */
.collapsed ~ .top-bar {
left: 70px;
}
/* Top Bar Right Elements */
.daisy-ai-container {
margin-left: auto;
margin-right: auto;
}
.profile-section {
position: relative;
margin-left: 16px;
margin-right: -17px;
}
/* Maintain regular desktop layout */
@media (min-width: 769px) {
.mobile-logo-container {
display: none;
}
.top-bar-right {
display: flex;
align-items: center;
}
}
/* Ensure proper transitions */
.top-bar, .page-header-wrapper {
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}
.daisy-ai-tooltip-wrapper {
position: relative;
display: inline-block;
}
.daisy-ai-tooltip {
position: absolute;
z-index: 1000;
left: 50%;
transform: translateX(-50%);
background-color: #2D6A4F;
color: white;
text-align: center;
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 6px 15px rgba(45, 106, 79, 0.2);
max-width: 250px;
width: max-content;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 0.9rem;
top: calc(100% + 10px);
}
.daisy-ai-tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 8px;
border-style: solid;
border-color: transparent transparent #2D6A4F transparent;
}
.daisy-ai-container:hover .daisy-ai-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.sidebar-initializing {
visibility: hidden;
}
/* Mobile Profile Section Styles */
@media (max-width: 768px) {
.profile-section {
margin-left: 8px;
position: relative;
}
/* Profile Toggle/Avatar */
.profile-toggle {
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
border: 2px solid var(--primary-color);
background: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.profile-avatar {
width: 100%;
height: 100%;
font-size: 0.9rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
/* Profile Menu Positioning */
.profile-menu {
position: fixed;
top: 60px;
right: 0;
max-width: none;
border-radius: 0 0 16px 16px;
transform: translateY(-100%);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 1049;
}
.profile-menu.active {
transform: translateY(0);
}
/* Profile Header */
.profile-header {
padding: 20px 16px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.profile-info {
display: flex;
align-items: center;
gap: 15px;
}
/* Large Avatar */
.profile-avatar-large {
width: 50px;
height: 50px;
margin: 0;
flex-shrink: 0;
}
/* User Details */
.profile-user {
flex: 1;
min-width: 0;
}
.profile-name {
font-size: 1.2rem;
color: white;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: -10px;
}
.profile-role {
font-size: 0.85rem;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: inline-block;
}
/* Menu Items */
.profile-menu-items {
padding: 8px 0;
background: white;
border-radius: 0 0 16px 16px;
}
.profile-menu-item {
padding: 14px 20px;
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
color: #333;
transition: all 0.2s ease;
}
.profile-menu-item:active {
background: rgba(45, 106, 79, 0.08);
}
.profile-menu-item i {
width: 20px;
color: var(--primary-color);
font-size: 1.1rem;
}
/* Additional Details */
.profile-details {
margin-top: 8px;
}
.profile-pillar,
.profile-intervention {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.15);
padding: 3px 8px;
border-radius: 10px;
display: inline-block;
margin-top: 4px;
}
/* Active State Enhancement */
.profile-section.active .profile-toggle {
border-color: var(--secondary-color);
box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.15);
}
/* Touch Area Enhancement */
.profile-menu-item {
position: relative;
z-index: 1;
}
.profile-menu-item::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: currentColor;
opacity: 0;
z-index: -1;
transition: opacity 0.2s ease;
}
.profile-menu-item:active::after {
opacity: 0.05;
}
/* Backdrop */
.profile-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1048;
}
.profile-backdrop.active {
opacity: 1;
visibility: visible;
}
}
.menu-item .menu-link:focus,
.submenu-item:focus,
.menu-link.dropdown-toggle:focus,
.menu-item .menu-link:visited:focus,
.submenu-item:visited:focus,
.menu-link.dropdown-toggle:visited:focus {
color: var(--visit-color) !important;
}
/* Ensure the color persists during loading state */
.menu-item .menu-link[data-loading="true"],
.submenu-item[data-loading="true"],
.menu-link.dropdown-toggle[data-loading="true"] {
color: var(--visit-color) !important;
}
/* Fixed sidebar header */
.sidebar-header {
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
background: linear-gradient(180deg, var(--primary-color) 100%, var(--secondary-color) 5%) !important;
}
/* Adjust nav-menu to scroll properly */
.nav-menu {
overflow-y: auto !important;
overflow-x: hidden !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
}
/* Ensure scrollbar styling is applied to nav-menu */
.nav-menu::-webkit-scrollbar {
width: 5px !important;
}
.nav-menu::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05) !important;
}
.nav-menu::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2) !important;
border-radius: var(--border-radius) !important;
}
/* Ensure footer nav separator remains anchored at the bottom */
.footer-nav-separator {
margin-top: auto !important;
position: relative !important;
}
/* Comprehensive Button Styling with !important flags - Professional Set */
/* Success Button */
.btn-outline-success {
color: #28a745 !important;
background-color: transparent !important;
background-image: none !important;
border-color: #28a745 !important;
border-width: 1px !important;
border-style: solid !important;
font-weight: 500 !important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success.active {
color: #fff !important;
background-color: #28a745 !important;
border-color: #28a745 !important;
box-shadow: 0 2px 5px rgba(40, 167, 69, 0.3) !important;
}
.btn-outline-success:focus,
.btn-outline-success.focus {
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5) !important;
outline: 0 !important;
}
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active {
background-color: #218838 !important;
border-color: #1e7e34 !important;
}
.btn-outline-success.disabled,
.btn-outline-success:disabled {
color: #28a745 !important;
background-color: transparent !important;
opacity: 0.65 !important;
}
/* Danger Button */
.btn-outline-danger {
color: #dc3545 !important;
background-color: transparent !important;
background-image: none !important;
border-color: #dc3545 !important;
border-width: 1px !important;
border-style: solid !important;
font-weight: 500 !important;
padding: 4px 8px !important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-outline-danger.active {
color: #fff !important;
background-color: #dc3545 !important;
border-color: #dc3545 !important;
box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3) !important;
}
.btn-outline-danger:focus,
.btn-outline-danger.focus {
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) !important;
outline: 0 !important;
}
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active {
background-color: #c82333 !important;
border-color: #bd2130 !important;
}
.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
color: #dc3545 !important;
background-color: transparent !important;
opacity: 0.65 !important;
}
.action-buttons .btn-outline-primary.smaller.edit {
color: #6c757d !important;
background-color: transparent !important;
background-image: none !important;
border-color: #6c757d !important;
border-width: 1px !important;
border-style: solid !important;
font-weight: 500 !important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.action-buttons .btn-outline-primary.smaller.edit:hover,
.action-buttons .btn-outline-primary.smaller.edit:active,
.action-buttons .btn-outline-primary.smaller.edit.active {
color: #fff !important;
background-color: #6c757d !important;
border-color: #6c757d !important;
box-shadow: 0 2px 5px rgba(108, 117, 125, 0.3) !important;
}
.action-buttons .btn-outline-primary.smaller.edit:focus,
.action-buttons .btn-outline-primary.smaller.edit:focus {
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
outline: 0 !important;
}
/* Secondary Button */
.btn-outline-secondary {
color: #6c757d !important;
background-color: transparent !important;
background-image: none !important;
border-color: #6c757d !important;
border-width: 1px !important;
border-style: solid !important;
font-weight: 500 !important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
color: #fff !important;
background-color: #6c757d !important;
border-color: #6c757d !important;
box-shadow: 0 2px 5px rgba(108, 117, 125, 0.3) !important;
}
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
outline: 0 !important;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
background-color: #5a6268 !important;
border-color: #545b62 !important;
}
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
color: #6c757d !important;
background-color: transparent !important;
opacity: 0.65 !important;
}
/* Button icon styling for all buttons */
.btn-outline-success i,
.btn-outline-danger i,
.btn-outline-secondary i {
font-size: 12px !important;
margin-right: 4px !important;
}
/* Footer Navigation Container Wrapper */
.footer-nav-section {
display: flex;
flex-direction: column;
margin-top: auto; /* Push to bottom of sidebar */
/* No reserve of its own. .nav-menu already ends in 20px of padding, which is just enough that
Chrome's link preview does not sit on top of the last item; adding more here only stacked
on that and left a visible dead strip under About. */
padding-bottom: 0;
position: relative;
width: 100%;
}
/* Footer Expansion Spacer - Creates overflow when footer submenus expand */
/* This element is managed by JavaScript to dynamically grow based on expanded submenu size */
/* IMPORTANT: Spacer is now OUTSIDE footer-nav-section but inside nav-menu */
.footer-expansion-spacer {
flex: 0 0 auto;
min-height: 0;
/* DO NOT set height:0 - it overrides min-height! */
transition: min-height 0.3s ease;
pointer-events: none;
/* Debug: uncomment to visualize spacer */
/* background: rgba(255, 0, 0, 0.2); */
}
/* CSS fallback for footer expansion - not needed with nav-spacer lock approach */
/* The nav-spacer lock is handled via JavaScript for precise control */
/* .nav-menu:has(.footer-nav-item.active) > .footer-expansion-spacer - DISABLED */
/* Fallback for browsers without :has() support - rely on JavaScript */
/* JS sets minHeight directly on the spacer element */
/* Modern Minimal Scrollbar for Sidebar Navigation */
.pro-sidebar .nav-menu {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.pro-sidebar .nav-menu::-webkit-scrollbar {
width: 6px;
}
.pro-sidebar .nav-menu::-webkit-scrollbar-track {
background: transparent;
margin: 10px 0;
}
.pro-sidebar .nav-menu::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
transition: background 0.2s ease;
}
.pro-sidebar .nav-menu::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Only show scrollbar when hovering the nav-menu or when actively scrolling */
.pro-sidebar .nav-menu:not(:hover)::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
}
/* Footer Navigation Separator */
.footer-nav-separator {
margin-top: 15px !important;
margin-bottom: 15px !important;
position: relative;
width: 100%;
}
.footer-nav-separator::after {
content: '';
position: absolute;
left: -7px;
right: -15px;
height: 2px;
background: rgba(255, 255, 255, 0.2);
top: 50%;
transform: translateY(-50%);
z-index: 0; /* Below submenu items */
pointer-events: none; /* Don't interfere with clicks */
}
/* ==========================================================================
EXPANDED SIDEBAR FOOTER NAVIGATION - Match Administration dropdown style
Based on W3Schools sidebar dropdown patterns and Modern CSS practices
========================================================================== */
/* Nav menu - scrollable container */
/* LAYOUT: main-nav-section + nav-spacer (grows) + footer-nav-section + expansion-spacer */
.pro-sidebar:not(.collapsed) .nav-menu {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
justify-content: flex-start !important;
}
/* Main nav section - natural size */
.pro-sidebar:not(.collapsed) .main-nav-section {
flex: 0 0 auto;
}
/* CRITICAL: Spacer between main and footer - GROWS to push footer to bottom */
/* This element is between main-nav-section and footer-nav-section */
/* When footer menu opens, JS locks this spacer's min-height to prevent shrinking */
/* NOTE: transition is controlled by JS - instant lock on open, smooth unlock on close */
.pro-sidebar:not(.collapsed) .nav-spacer {
flex: 1 1 0 !important; /* Grow AND shrink to fill/release space */
min-height: 20px;
/* NO transition here - JS controls timing */
}
/* Footer nav section - natural position after spacer */
.pro-sidebar:not(.collapsed) .footer-nav-section {
display: block !important;
flex: 0 0 auto;
}
/* Footer nav item - same as menu-item */
.pro-sidebar:not(.collapsed) .footer-nav-item {
display: block !important;
position: relative;
margin-bottom: 2px !important;
margin: 2px 2px 2px 12px !important;
border-radius: var(--border-radius) !important;
}
/* Active footer item - light green background ALL AROUND like Administration */
.pro-sidebar:not(.collapsed) .footer-nav-item.active {
background: var(--secondary-color) !important;
border-radius: var(--border-radius) !important;
padding-bottom: 5px !important;
}
/* Footer submenu - CRITICAL: position static for inline document flow */
.pro-sidebar:not(.collapsed) .footer-nav-item .submenu {
position: relative !important; /* Changed from static to relative for z-index */
z-index: 10 !important; /* Above separator line */
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: auto !important;
min-width: unset !important;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.3s ease-out, opacity 0.2s ease, visibility 0.2s ease;
display: block !important;
padding: 0 !important;
margin: 5px 5px 0 5px !important;
background: var(--primary-color) !important;
box-shadow: none !important;
border-radius: var(--border-radius) !important;
border: none !important;
font-size: 12px !important;
}
/* Active footer submenu - expanded downward */
.pro-sidebar:not(.collapsed) .footer-nav-item.active .submenu {
max-height: 500px !important; /* Increased for larger submenus like About */
opacity: 1 !important;
visibility: visible !important;
overflow-y: auto !important;
overflow-x: hidden !important; /* Prevent horizontal scrollbar */
clip-path: none !important; /* Prevent clipping */
}
/* Footer submenu items - MATCH Administration submenu items exactly */
/* Inherit from base .submenu-item and apply same hover/active styles */
.pro-sidebar:not(.collapsed) .footer-nav-item .submenu .submenu-item {
display: flex !important;
align-items: center !important;
padding: 10px 10px !important;
margin: 0 !important;
font-size: 12px !important;
color: var(--text-secondary) !important;
text-decoration: none !important;
border-radius: var(--border-radius) !important;
transition: all 0.2s ease !important;
opacity: 0.8 !important;
background: transparent !important;
position: relative !important; /* Ensure proper stacking */
z-index: 1 !important;
}
/* Hover state - MATCH Administration submenu hover exactly */
.pro-sidebar:not(.collapsed) .footer-nav-item .submenu .submenu-item:hover {
opacity: 1 !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
transform: translateX(5px) !important;
}
/* Active state - MATCH Administration submenu active exactly */
.pro-sidebar:not(.collapsed) .footer-nav-item .submenu .submenu-item.active {
background: rgba(255, 255, 255, 0.15) !important;
color: var(--text-primary) !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* Dropdown Toggle Arrow rotation */
.pro-sidebar:not(.collapsed) .footer-nav-item.active .menu-link.dropdown-toggle::after {
transform: translateY(-50%) rotate(180deg);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.footer-nav-section {
margin-top: 20px;
padding-bottom: 10px;
}
.footer-nav-separator {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
}
/* Ensure consistent vertical scrolling and prevent content jumping */
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
}
/* Webkit (Chrome, Safari, newer versions of Opera) */
::-webkit-scrollbar {
width: 8px; /* Thin scrollbar */
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* Light gray track */
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #888; /* Dark gray thumb */
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555; /* Darker gray on hover */
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
/* Prevent content from shifting when scrollbar appears */
body {
overflow-y: scroll;
margin-right: calc(-1 * (100vw - 100%));
}
/* Ensure main content has proper scrolling */
.main-content {
overflow-y: auto;
height: auto;
width: 100%;
}
/* Prevent horizontal scrolling in most scenarios */
.container,
.main-content-default {
max-width: 100%;
overflow-x: hidden;
}
.pro-sidebar {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.pro-sidebar::-webkit-scrollbar {
display: none; /* For Chrome, Safari, and Opera */
}
/* Custom horizontal scrollbar container */
.pro-sidebar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6px; /* Height of the scrollbar */
background: transparent;
z-index: 1001;
pointer-events: none;
}
/* Create a custom scrollbar container below the header */
.nav-menu {
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin-top: 0;
padding-bottom: 20px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
.nav-menu::-webkit-scrollbar {
width: 4px; /* Make the scrollbar thinner */
height: 4px;
}
.nav-menu::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
margin: 2px 0;
}
.nav-menu::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-menu::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Ensure the sidebar header stays fixed */
.sidebar-header {
position: sticky !important;
top: 0 !important;
z-index: 1002 !important; /* Higher than scrollbar */
background: linear-gradient(180deg, var(--primary-color) 100%, var(--secondary-color) 5%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Horizontal scrollbar styling for overflow content */
.nav-menu-scrollable {
position: relative;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
height: 6px;
margin-top: -6px; /* Negative margin to align with content */
opacity: 0;
transition: opacity 0.3s ease;
}
.pro-sidebar:hover .nav-menu-scrollable {
opacity: 1;
}
.nav-menu-scrollable::-webkit-scrollbar {
height: 4px;
}
.nav-menu-scrollable::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
}
.nav-menu-scrollable::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.nav-menu-scrollable::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Fix for Firefox */
@supports (-moz-appearance: none) {
.nav-menu {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
.nav-menu-scrollable {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
}
.pro-sidebar:not(.collapsed) .sidebar-header .logo-container {
padding-left: 25px;
}
/* Keep the original CSS for collapsed state */
.collapsed .sidebar-header .logo-container {
justify-content: center;
padding: 0;
}
@media (min-width: 1300px) and (max-width: 1499px) {
.main-content {
overflow-x: hidden !important;
}
.main-content > .container {
width: 100% !important;
max-width: 1100px !important;
margin: 0 auto !important;
overflow-x: hidden !important;
}
.pro-sidebar:not(.collapsed) ~ .main-content {
width: calc(100% - var(--sidebar-width)) !important;
margin-left: var(--sidebar-width) !important;
overflow-x: hidden !important;
}
.main-content.expanded {
width: calc(100% - var(--sidebar-collapsed-width)) !important;
margin-left: var(--sidebar-collapsed-width) !important;
}
.main-content.expanded > .container {
max-width: 1200px !important;
}
}
/* Breadcrumb report-name loading: a compact skeleton pill that fits the breadcrumb line. The sweep is a
moving background, not a clipped overlay, so the pill needs no overflow: hidden and keeps the "/" before
it like the loaded name does. */
.breadcrumb-item.loading {
position: relative;
display: inline-block;
width: 100px;
height: 0.9em;
min-width: 0;
margin: 0;
padding: 0;
border: 0; /* the report pages' approvalreport.css .loading overlay adds a 5px cyan border */
vertical-align: middle;
border-radius: 999px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.08) 70%);
background-size: 300% 100%;
animation: bc-skeleton-sweep 1.25s ease-in-out infinite;
}
@keyframes bc-skeleton-sweep {
from {
background-position: 100% 0;
}
to {
background-position: 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
.breadcrumb-item.loading {
animation: none;
}
}
@keyframes shimmer {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.mobile-nav-wrapper {
box-shadow: none !important;
}
.gridview {
margin: 0 10px !important;
overflow-x: auto !important;
width: calc(100% - 20px) !important;
}
.gridview td {
padding: 12px 16px !important;
}
/* Remove the gradient shadow at the bottom of nav-menu */
.nav-menu::after {
display: none !important;
}
}
@media (max-width: 768px) {
.mobile-nav-wrapper {
box-shadow: none !important;
}
/* Force table container to respect margins */
.container {
padding-left: 5px !important;
padding-right: 5px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.gridview td {
padding: 12px 16px !important;
}
/* Remove the gradient shadow at the bottom of nav-menu */
.nav-menu::after {
display: none !important;
}
/* Ensure any overflow container respects boundaries */
div[style*="overflow:auto"] {
max-width: calc(100% - 20px) !important;
margin: 0 10px !important;
box-sizing: border-box !important;
}
/* Ensure main content has proper width */
.main-content {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
}
/* Enhance pillar badge styles to handle overflow (around line 2613) */
.pillar-tag {
display: inline-flex;
align-items: center;
height: auto;
padding: 4px 10px;
margin: 3px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: default;
white-space: normal;
word-wrap: break-word;
line-height: 1.2;
hyphens: auto;
max-width: 100%;
}
/* Update pillar badges to allow better handling of long text */
.pillar-badge {
display: inline-flex;
align-items: center;
height: auto;
min-height: 28px;
padding: 4px 10px;
border-radius: 8px;
margin: 3px 4px 3px 0;
/* One colour for every pillar, the same chip the intervention listings use. The badge used to
take its colour from the pillar's database id, so the palette silently reassigned itself on a
renumber and the colour never told a reader anything. */
background: #e6f4ea;
color: #1e4620;
border: 1px solid #c6e0cb;
box-shadow: none;
font-size: 0.85rem;
font-weight: 500;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: default;
white-space: normal;
word-wrap: break-word;
line-height: 1.2;
hyphens: auto;
max-width: 100%;
}
/* Improve container layout to better handle wrapped badges */
.pillar-container {
margin: 8px 0;
width: 100%;
max-width: 100%;
}
.pillar-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
gap: 4px;
}
/* Ensure GridView cells containing pillar badges handle overflow appropriately */
.gridview td[alt="project.pillars.pillar_id"] {
max-width: 200px;
width: fit-content;
padding: 8px 12px;
}
/* Responsive adjustments */
@media screen and (max-width: 1200px) {
.pillar-badge {
font-size: 0.8rem;
padding: 3px 8px;
min-height: 26px;
}
.gridview td[alt="project.pillars.pillar_id"] {
max-width: none !important;
}
}
@media screen and (max-width: 997px) {
.pillar-badges {
max-width: 100%;
justify-content: flex-start;
}
.pillar-badge {
margin: 2px;
max-width: calc(100% - 4px);
}
}
@media screen and (max-width: 768px) {
.gridview td[alt="project.pillars.pillar_id"] {
max-width: none;
width: 100%;
}
.pillar-badge {
font-size: 0.85rem;
padding: 4px 10px;
}
}
/* Tablet view styles (between 774px and 997px) */
@media screen and (min-width: 774px) and (max-width: 997px) {
/* Tablet-specific gridview styling */
.gridview {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.gridview tr {
display: block;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.gridview td {
display: block;
width: 100%;
padding: 12px 15px;
border-bottom: 1px solid #eaeaea;
position: relative;
box-sizing: border-box;
}
.gridview thead {
display: none;
}
.gridview td:before {
content: attr(data-title);
font-weight: 600;
display: block;
margin-bottom: 8px;
}
/* Ensure the row number cell is properly styled */
.gridview td:first-child {
background-color: #3a7d6d;
color: white;
text-align: center;
font-weight: 600;
padding: 12px 8px;
}
.gridview td:first-child:before {
display: none;
}
/* Pillar styles specific to tablet view */
.pillar-container {
width: 100%;
max-width: 100%;
margin: 8px 0;
}
.pillar-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
max-width: 100%;
justify-content: flex-start;
gap: 6px;
padding-left: 0;
}
.pillar-badge {
display: inline-flex;
align-items: center;
margin: 3px 6px 3px 0;
font-size: 0.85rem;
padding: 4px 10px;
height: auto;
min-height: 28px;
white-space: normal;
word-wrap: break-word;
line-height: 1.2;
max-width: fit-content;
}
/* Button styling */
.gridview .btn-grid {
padding: 8px 12px;
margin: 4px 0;
min-height: 36px;
}
}
/* Enhanced animation for sliding from left */
@keyframes slideInFromLeft {
from {
opacity: 0.8;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (max-width: 768px) {
/* Apply animation to menu items when sliding from left */
.menu-open .mobile-menu-content .menu-item {
animation: slideInFromLeft 0.3s ease forwards;
animation-delay: calc(0.05s * var(--item-index, 0));
opacity: 0;
}
/* Keep toggle button in same position */
.mobile-nav-toggle {
right: 20px; /* Keep toggle on right side */
}
}
/* Mobile Menu Animation */
@keyframes slideInLeft {
from {
transform: translateX(-100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.menu-open .mobile-menu-content .menu-item {
animation: slideInLeft 0.3s ease forwards;
animation-delay: calc(var(--item-index) * 0.05s);
opacity: 0;
}
/* Ensure hover effects don't reset animation */
.menu-open .mobile-menu-content .menu-item:hover {
opacity: 1;
}
@media (max-width: 768px) {
.submenu-title {
display: none;
}
}
/* Add styles to enhance icon transitions */
.sidebar-toggle-btn i {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.2s ease-in-out,
color 0.3s ease;
}
/* Additional transition classes for smoother animations */
.pro-sidebar {
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.3s ease,
box-shadow 0.4s ease !important;
}
.main-content {
transition: margin-left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
padding 0.3s ease !important;
}
/* Enhance submenu animation */
.submenu {
transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease,
visibility 0.3s ease !important;
}
/* Enhance hover effects on the sidebar toggle */
.sidebar-toggle-btn:active {
transform: scale(0.95);
transition: all 0.1s ease-in-out;
}
/* Add subtle animation to sidebar logo */
.logo-container img {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease,
margin 0.3s ease !important;
}
/* Make content area transition smoother */
.container {
transition: width 0.4s ease-in-out,
padding 0.3s ease !important;
}
/* Updated layout for indicators performance controls */
.indicators-performance-controls {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: -5px;
position: relative;
}
.indicators-performance-right-controls {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.reset-filter-btn {
background-color: var(--primary-color, #457269);
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.reset-filter-btn:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'%3E%3C/path%3E%3Cpath d='M3 3v5h5'%3E%3C/path%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
.reset-filter-btn:hover {
background-color: var(--secondary-color, #40916C);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.reset-filter-btn:active {
transform: translateY(0px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Enhanced trend visualization styles */
.kpi-trend-container {
position: relative;
margin-top: 10px;
}
.kpi-trend {
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
padding: 8px 12px;
border-radius: 20px;
background-color: rgba(0,0,0,0.04);
width: fit-content;
transition: all 0.3s ease;
cursor: pointer;
}
.kpi-trend:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.trend-up {
color: var(--main-green-color, #98C21F);
background-color: rgba(152, 194, 31, 0.15);
}
.trend-down {
color: #e74c3c;
background-color: rgba(231, 76, 60, 0.15);
}
.trend-neutral {
color: #95a5a6;
background-color: rgba(149, 165, 166, 0.15);
}
.trend-history {
display: flex;
align-items: center;
gap: 4px;
margin-top: 10px;
height: 80px;
border: none;
background: inherit !important;
}
.trend-point {
height: 12px;
border-radius: 6px;
flex: 1;
position: relative;
background-color: #e0e0e0;
overflow: hidden;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.trend-point:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.trend-fill {
position: absolute;
height: 100%;
left: 0;
top: 0;
border-radius: 6px;
transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.trend-point:hover::after {
content: attr(data-period) ': ' attr(data-value);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: rgba(0,0,0,0.8);
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
margin-bottom: 8px;
z-index: 10;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.trend-point:hover::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: rgba(0,0,0,0.8) transparent transparent transparent;
margin-bottom: -5px;
z-index: 11;
}
.trend-sparkline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Enhanced styles for filtering indicator selection */
.indicator-grid-item, .indicator-bar-group {
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.indicator-grid-item.selected,
.indicator-bar-group.selected {
border-left: 4px solid var(--primary-color, #457269) !important;
background-color: rgba(69, 114, 105, 0.05);
transform: scale(1.02);
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
position: relative;
z-index: 2;
}
/* Old green pulsing animation removed - using current selection method instead */
/* Old blur filtering method removed - using current hiding method instead */
/* Enhanced tooltips */
.chart-tooltip {
position: absolute;
padding: 14px 18px;
background: rgba(40, 40, 40, 0.95);
color: white;
border-radius: 8px;
pointer-events: none;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
z-index: 100;
max-width: 300px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
transform: translateY(10px);
}
.chart-tooltip.show {
opacity: 1;
transform: translateY(0);
}
.chart-tooltip-title {
font-weight: 600;
font-size: 15px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 8px;
color: white;
}
.trend-mini-chart {
margin: 10px 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Animation for sorting and filtering */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes moveToTop {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
/* Filtering status indicator */
#filtering-status {
position: fixed;
bottom: 20px;
right: 20px;
background-color: rgba(69, 114, 105, 0.9);
color: white;
padding: 10px 16px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 12px;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
backdrop-filter: blur(5px);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s, transform 0.3s;
}
.filtering-spinner {
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.indicators-performance-controls {
flex-direction: column;
align-items: flex-start;
}
.indicators-performance-right-controls {
width: 100%;
justify-content: space-between;
margin-top: 10px;
}
}
/* Updated trend history styling for the mini line chart */
.trend-history {
height: auto !important;
min-height: 30px !important;
margin-top: 8px;
position: relative;
padding: 5px;
}
.trend-history svg{
overflow: visible !important;
}
.trend-sparkline {
width: 100%;
height: 100%;
display: block;
}
.trend-sparkline circle {
transition: r 0.2s ease;
cursor: pointer;
}
.trend-sparkline path {
transition: stroke-width 0.2s ease;
}
/* Styling for highlight dot when hovering many data points */
.highlight-dot {
filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
animation: pulse-dot 1.5s infinite;
transform-origin: center;
}
@keyframes pulse-dot {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Better tooltip for trend points */
.chart-tooltip {
max-width: 250px;
z-index: 9999;
pointer-events: none;
}
/* Ensure tooltip has enough contrast */
.chart-tooltip-title {
color: white;
font-weight: bold;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 6px;
}
.chart-tooltip-value {
display: flex;
justify-content: space-between;
padding: 2px 0;
}
.chart-tooltip-value span:first-child {
opacity: 0.7;
margin-right: 30px;
}
.chart-tooltip-value span:last-child {
font-weight: bold;
color: white;
}
/* Make the trend caption clearer */
.trend-caption {
font-size: 10px;
color: #666;
text-align: center;
margin-top: 4px;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Improved path anti-aliasing for smoother lines */
.trend-sparkline path {
shape-rendering: geometricPrecision;
}
/* Make the trend area slightly bigger */
.kpi-trend-container {
position: relative;
margin-top: 10px;
}
/* Improve styling of the trend direction indicators */
.kpi-trend {
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
padding: 6px 12px;
border-radius: 20px;
background-color: rgba(0,0,0,0.05);
width: fit-content;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 5px;
}
.kpi-trend:hover {
transform: translateY(-2px);
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.kpi-trend svg {
margin-right: 8px !important;
stroke-width: 2.5px;
}
.trend-up {
color: var(--main-green-color, #98C21F);
background-color: rgba(152, 194, 31, 0.15);
}
.trend-down {
color: #e74c3c;
background-color: rgba(231, 76, 60, 0.15);
}
.trend-neutral {
color: #95a5a6;
background-color: rgba(149, 165, 166, 0.15);
}
.trend-no-data {
width: 100%;
text-align: center;
font-size: 12px;
color: #999;
font-style: italic;
padding: 8px 0;
background-color: rgba(0,0,0,0.03);
border-radius: 4px;
}
/* Enhanced Modern KPI Cards Layout */
.kpi-cards {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
margin-bottom: 20px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.kpi-card {
background-color: white !important;
border-radius: 12px !important;
padding: 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
position: relative !important;
overflow: hidden !important;
min-height: 160px !important;
border-left: 1px solid rgba(0, 0, 0, 0.03) !important;
border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
z-index: 1 !important;
}
/* Coloured top borders intentionally removed — modern flat look */
.kpi-card::before { content: none !important; }
.completion-card {
--card-color: var(--primary-color, #457269) !important;
}
.interventions-card {
--card-color: #4285F4 !important;
}
.results-card {
--card-color: var(--main-green-color, #98C21F) !important;
}
.targets-card {
--card-color: #e74c3c !important;
}
.kpi-card-icon {
position: absolute !important;
top: 2px !important;
right: 10px !important;
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: rgba(0, 0, 0, 0.04) !important;
color: var(--card-color, #457269) !important;
transition: all 0.3s ease !important;
}
.kpi-card:hover .kpi-card-icon {
background-color: var(--card-color, #457269) !important;
color: white !important;
}
.kpi-card h3 {
margin-top: 0 !important;
margin-bottom: 16px !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #333 !important;
position: relative !important;
padding-right: 40px !important; /* Make room for icon */
}
.kpi-main {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 12px !important;
min-height: 50px !important;
}
.kpi-value {
font-size: 26px;
font-weight: 700 !important;
color: #333 !important;
flex: 1 !important;
transition: transform 0.3s ease, color 0.3s ease !important;
}
.kpi-card:hover .kpi-value {
transform: scale(1.05) !important;
}
.completion-card .kpi-value {
color: var(--primary-color, #457269) !important;
}
.results-card .kpi-value {
color: var(--main-green-color, #98C21F) !important;
}
.targets-card .kpi-value {
color: #e74c3c !important;
}
.interventions-card .kpi-value {
color: #4285F4 !important;
}
/* Mini-chart shared visuals — sizing comes from the per-card rules in ToC_Control.ascx */
.kpi-mini-chart, .kpi-chart {
background-color: transparent;
border-radius: 6px;
overflow: hidden;
}
.kpi-mini-chart svg, .kpi-chart svg {
display: block;
width: 100%;
height: 100%;
}
.targets-card, .results-card {
width: 100% !important;
}
/* Responsive: on phones every card stacks naturally; nothing extra needed. */
.kpi-trend-container {
position: relative !important;
}
.kpi-trend {
display: flex !important;
align-items: center !important;
padding: 8px 12px !important;
border-radius: 8px !important;
background-color: rgba(0, 0, 0, 0.03) !important;
font-size: 13px !important;
font-weight: 500 !important;
margin-top: 8px !important;
transition: all 0.3s ease !important;
}
.kpi-card:hover .kpi-trend {
background-color: rgba(0, 0, 0, 0.05) !important;
}
.trend-up {
color: var(--main-green-color, #98C21F) !important;
background-color: rgba(152, 194, 31, 0.1) !important;
}
.trend-down {
color: #e74c3c !important;
background-color: rgba(231, 76, 60, 0.1) !important;
}
.trend-neutral {
color: #95a5a6 !important;
background-color: rgba(149, 165, 166, 0.1) !important;
}
.kpi-detail {
font-size: 11px !important;
color: #666 !important;
margin-top: 6px !important;
font-style: italic !important;
transition: color 0.3s ease !important;
}
.kpi-card:hover .kpi-detail {
color: #333 !important;
}
/* Progress Bar Styling */
.progress-bar-container {
width: 100% !important;
height: 8px !important;
background-color: rgba(0, 0, 0, 0.05) !important;
border-radius: 4px !important;
overflow: hidden !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.progress-bar {
background-image: linear-gradient(to right, var(--secondary-color, #40916C), var(--main-green-color, #98C21F)) !important;
border-radius: 4px !important;
transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
.interventions-card .progress-bar {
background-image: linear-gradient(to right, #4285F4, #34A853) !important;
}
/* Radial Chart Styling */
.radial-chart {
width: 60px !important;
height: 60px !important;
position: relative !important;
}
/* Mini Chart Styling */
.mini-chart-line {
fill: none;
stroke: var(--main-green-color, #98C21F);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.targets-card .mini-chart-line {
stroke: #e74c3c;
}
.mini-chart-area {
fill: url(#chartGradient);
opacity: 0.2;
}
.targets-card .mini-chart-area {
fill: url(#targetChartGradient);
}
.mini-chart-dot {
fill: var(--main-green-color, #98C21F);
stroke: white;
stroke-width: 1;
}
.targets-card .mini-chart-dot {
fill: #e74c3c;
}
/* Override for Contributing Interventions (when targets-card has interventions-mode class) */
.targets-card.interventions-mode .mini-chart-line {
stroke: #4CAF50 !important;
}
.targets-card.interventions-mode .mini-chart-area {
fill: url(#targetsChart_customGradient) !important;
opacity: 0.3 !important;
}
.targets-card.interventions-mode .mini-chart-dot {
fill: #4CAF50 !important;
}
/* Trend History Styling */
.trend-history {
height: 30px !important;
display: flex !important;
align-items: center !important;
margin-top: 8px !important;
gap: 3px !important;
}
.trend-point {
flex: 1 !important;
height: 6px !important;
background-color: rgba(0, 0, 0, 0.05) !important;
border-radius: 3px !important;
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.trend-point:hover {
transform: scaleY(1.5) !important;
}
.trend-point::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
background-color: var(--primary-color, #457269) !important;
border-radius: 3px !important;
transition: width 1s ease-out !important;
}
/* Fix for any trend-no-data styles */
.trend-no-data {
font-size: 10px !important;
padding: 2px 5px !important;
text-align: center !important;
color: #999 !important;
font-style: italic !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
}
.trend-no-data.mini {
font-size: 9px !important;
}
/* Card Entrance Animation */
@keyframes cardEntrance {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kpi-cards {
animation: cardEntrance 0.5s ease-out !important;
}
.kpi-card:nth-child(1) {
animation: cardEntrance 0.5s 0.1s both !important;
}
.kpi-card:nth-child(2) {
animation: cardEntrance 0.5s 0.2s both !important;
}
.kpi-card:nth-child(3) {
animation: cardEntrance 0.5s 0.3s both !important;
}
.kpi-card:nth-child(4) {
animation: cardEntrance 0.5s 0.4s both !important;
}
/* Value Pulse Animation when updated */
@keyframes valuePulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.value-updated {
animation: valuePulse 0.5s ease-in-out !important;
}
/* Media Queries */
@media (min-width: 1601px) {
.kpi-cards {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media (min-width: 1201px) and (max-width: 1600px) {
.kpi-cards {
grid-template-columns: repeat(4, 1fr) !important;
}
.kpi-card {
padding: 14px !important;
}
.kpi-value {
font-size: 22px !important;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.kpi-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (min-width: 576px) and (max-width: 991px) {
.kpi-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 575px) {
.kpi-cards {
grid-template-columns: 1fr !important;
}
.kpi-card {
padding: 12px !important;
}
.kpi-value {
font-size: 21px !important;
}
}
.toc-additional-charts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
/* ToC Comparison Chart Styles */
.toc-comparison-card {
margin-bottom: 0; /* Remove bottom margin as the container handles this */
}
.toc-comparison-area {
min-height: 350px;
}
.legend-container {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 15px;
padding: 5px 5px;
background-color: #f9f9f9;
border-radius: 8px;
border: 1px solid #eee;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.legend-item {
display: flex;
align-items: center;
gap: 5px;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 4px;
}
.legend-text {
font-size: 10px;
font-weight: 500;
}
/* The bubble card's legend has more entries than one line of a half-width card holds: rows, each entry on one line */
.financial-efficiency-card .legend-container {
flex-wrap: wrap;
justify-content: center;
row-gap: 6px;
}
.financial-efficiency-card .legend-item,
.financial-efficiency-card .bubble-size-legend {
white-space: nowrap;
}
/* Output Level Chart Styles */
.output-level-card {
margin-bottom: 0; /* Remove bottom margin as the container handles this */
}
.output-level-area {
min-height: 350px;
}
.output-level-controls {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.count-bar {
fill: #4285F4;
transition: all 0.3s;
}
.count-bar:hover {
fill: #2a75f3;
}
.result-bar {
fill: #34A853;
transition: all 0.3s;
}
.result-bar:hover {
fill: #2d9248;
}
.target-bar {
fill: #e74c3c;
transition: all 0.3s;
}
.target-bar:hover {
fill: #e74c3c;
}
.level-axis text {
font-weight: 500;
}
/* Bar chart labels */
.bar-label {
font-size: 12px;
font-weight: bold;
text-anchor: middle;
}
/* Animated loading state */
.loading-chart {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-style: italic;
color: #999;
}
.loading-chart::after {
content: '';
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid var(--primary-color, #457269);
border-radius: 50%;
margin-left: 10px;
animation: spin 1s linear infinite;
}
@media (max-width: 768px) {
.toc-comparison-area, .output-level-area {
min-height: 250px;
}
.legend-container {
flex-direction: column;
gap: 8px;
}
}
.mini-trend {
width: 100%;
height: 40px;
position: relative;
overflow: hidden;
}
.trend-sparkline {
width: 100%;
height: 100%;
}
/* Style for index chart with no grids */
.trend-sparkline path {
transition: all 0.3s ease;
}
.trend-sparkline circle {
transition: all 0.3s ease;
transform-origin: center;
}
.trend-sparkline:hover path {
filter: brightness(1.2);
}
.trend-sparkline:hover circle {
transform: scale(1.25);
}
.contribution-metrics {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 5px 0 15px;
}
.intervention-count-container, .indicator-count-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 12px;
border-radius: 8px;
transition: all 0.3s ease;
flex: 1;
}
.intervention-count-container {
background-color: rgba(66, 133, 244, 0.1);
border-left: 3px solid #4285F4;
}
.indicator-count-container {
background-color: rgba(152, 194, 31, 0.1);
border-left: 3px solid var(--main-green-color, #98C21F);
}
.intervention-count-value, .indicator-count-value {
font-size: 28px;
font-weight: 700;
margin-bottom: 5px;
}
.intervention-count-value {
color: #4285F4;
}
.indicator-count-value {
color: var(--main-green-color, #98C21F);
}
.intervention-count-label, .indicator-count-label {
font-size: 12px;
font-weight: 500;
color: #555;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contribution-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
color: #95a5a6;
}
.contribution-divider svg {
width: 20px;
height: 20px;
}
/* Hover effect */
.intervention-count-container:hover, .indicator-count-container:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
/* Make sure the kpi-main has proper spacing */
.kpi-main {
margin-bottom: 15px;
}
/* Enhancement for the loading overlay positioning */
#loadingOverlay {
display: none;
position: fixed;
top: 20px;
left: 0;
right: 0;
z-index: 998;
justify-content: center;
align-items: flex-start;
}
#loadingOverlay > div {
background-color: white;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
min-width: 200px;
text-align: center;
margin-top: 85px;
}
.kpi-value-container {
display: flex;
flex-direction: column;
flex: 1;
}
.kpi-secondary-value {
font-size: 16px;
color: #666;
margin-top: 5px;
display: flex;
align-items: center;
}
.value-label {
font-size: 14px;
margin-left: 5px;
opacity: 0.8;
}
.intervention-stats {
display: flex;
flex-direction: column;
padding: 5px;
background-color: rgba(66, 133, 244, 0.1);
border-radius: 8px;
max-width: 95px;
text-align: center;
justify-content: center;
transition: all 0.3s ease;
}
.intervention-stats:hover {
background-color: rgba(66, 133, 244, 0.15);
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.interventions-ratio {
display: flex;
flex-direction: column;
align-items: center;
}
#indicatorsPerProject {
font-size: 20px;
font-weight: 700;
color: #4285F4;
}
.ratio-label {
font-size: 11px;
text-align: center;
color: #666;
margin-top: 3px;
line-height: 1.2;
}
/* Enhanced loading animations for indicator display */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pulse {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
/* Text loading animation */
.loading-text {
display: inline-block;
position: relative;
color: #777;
font-style: italic;
}
.loading-text::after {
content: "...";
position: absolute;
right: -12px;
animation: dotPulse 1.5s infinite;
}
@keyframes dotPulse {
0% {
content: ".";
}
33% {
content: "..";
}
66% {
content: "...";
}
100% {
content: ".";
}
}
/* Loading state for the indicator code and name */
.loading-indicator {
animation: pulse 1.5s infinite ease-in-out;
background: linear-gradient(90deg, rgba(210, 210, 210, 0.3), rgba(230, 230, 230, 0.4), rgba(210, 210, 210, 0.3));
background-size: 200% 100%;
animation: pulse 1.5s infinite;
}
/* Icon loading animation */
.indicator-icon-svg.loading {
animation: spin 2s linear infinite;
}
.view-btn.active {
background-color: #F0F5F0 !important;
color: var(--primary-color, #457269) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
font-weight: 600 !important;
}
/* Fix for progress chart responsive issues */
.chart-progress-area {
width: 100%;
min-height: 350px;
}
/* Fix the loading animation styling */
.filtering-status {
/* The styling is defined dynamically in JavaScript */
}
/* Prevent tooltips from showing on blurred elements */
.blurred .chart-tooltip {
display: none !important;
}
/* Pillar Contributions Chart Styles */
.pillar-contributions-card {
position: relative;
}
.pillar-contributions-area {
min-height: 350px;
}
.radar-path {
fill-opacity: 0.3;
stroke-width: 2px;
transition: all 0.3s ease;
}
.radar-dot {
cursor: pointer;
transition: all 0.2s ease;
transform-origin: center;
}
.radar-dot:hover {
filter: brightness(1.2);
transform: scale(1.3);
}
.axis-label {
font-size: 12px;
font-weight: 600;
fill: #333;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8);
}
.axis-line {
stroke: #ccc;
stroke-dasharray: 4, 4;
}
.circle-scale {
fill: none;
stroke: #eee;
}
.tick-label {
font-size: 9px;
fill: #999;
}
.value-label {
font-size: 10px;
font-weight: bold;
fill: #333;
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.8);
}
/* Process Tracker Styling */
.process-status-indicator {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.process-icon {
flex: 0 0 60px;
text-align: center;
}
.process-details {
flex: 1;
padding-left: 15px;
}
.process-details h4 {
margin-bottom: 5px;
font-size: 1.2rem;
}
.error-container {
overflow-y: auto;
margin-top: 15px;
background-color: #fff1f0;
border-color: #ffccc7;
}
#processProgressBar {
transition: width 0.6s ease, background-color 0.3s ease;
}
.modal-header.bg-primary {
background-color: var(--primary-color) !important;
}
.modal-header.bg-success {
background-color: var(--main-green-color) !important;
}
.modal-header.bg-danger {
background-color: #f5222d !important;
}
.modal-header.bg-warning {
background-color: #faad14 !important;
}
/* Smooth transitions for modals */
.modal {
transition: opacity 0.3s ease-in-out;
}
/* Add a fade-in animation for the processing modal */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in-modal {
animation: fadeIn 0.4s ease-in-out;
}
/* Active process indicator */
.process-active-indicator {
display: inline-block;
padding: 4px 8px;
background-color: #ffc107;
color: #212529;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
margin-left: 10px;
}
/* Enhanced progress bar with smoother animation */
.progress-bar-animated {
animation: progress-bar-stripes 1s linear infinite;
}
/* Processing modal with cleaner layout */
#processingModal .process-status-indicator {
display: flex;
align-items: center;
/* Kept together as one centred group. The spinner used to sit in a fixed 60px column at the far
left with the text stretched across the rest of the modal, leaving a wide gap between them. */
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
#processingModal .process-icon {
flex: 0 0 auto;
margin-right: 0;
}
#processingModal .process-details {
flex: 0 1 auto;
padding-left: 0;
text-align: left;
}
#processingModal #processTimeElapsed {
font-family: monospace;
}
#ctl00_MainContent_myUC_ProjectBudgetTxBx,
#ctl00_MainContent_myUC_DeliveryTextBox {
/* show as non-interactive */
cursor: default;
pointer-events: none;
/* visually “disabled” but still readable */
background-color: #f5f5f5 !important;
color: #444 !important;
/* emphasize the pre-populated value */
font-weight: bold;
}
/* Optional: remove the default input outline on focus */
#ctl00_MainContent_myUC_ProjectBudgetTxBx:focus,
#ctl00_MainContent_myUC_DeliveryTextBox:focus {
outline: none;
}
/* Review Notes GridView Styling */
.review-notes .table thead tr,
.review-notes .table tr[style*="background-color:Tan"] {
background-color: var(--primary-color) !important;
color: white !important;
font-weight: bold !important;
}
.review-notes .table thead tr th,
.review-notes .table tr[style*="background-color:Tan"] th {
border-color: rgba(255, 255, 255, 0.2) !important;
color: white !important;
}
/* Download link styling for attachments */
.download-link {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
background-color: #3b82f6 !important;
color: white !important;
border-radius: 4px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
max-width: 100% !important;
word-break: break-all !important;
white-space: normal !important;
text-align: left !important;
}
.download-link:hover {
background-color: #2563eb !important;
color: white !important;
text-decoration: none !important;
}
.download-link i {
flex-shrink: 0 !important;
}
.truncate-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
/* Fix for download link truncation in financial container */
.uploaded-financial-container .download-link {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
background-color: #3b82f6 !important;
color: white !important;
border-radius: 4px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
max-width: 100% !important;
word-break: break-word !important;
white-space: normal !important; /* Allow text to wrap naturally */
text-align: left !important;
}
.uploaded-financial-container .download-link:hover {
background-color: #2563eb !important;
}
.uploaded-financial-container .download-link i {
flex-shrink: 0 !important; /* Prevent icon from shrinking */
}
/* Container styling to give more room */
.uploaded-financial-container {
padding: 0px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
}
/* Responsive adjustments based on screen size */
@media (min-width: 768px) {
.uploaded-financial-container .download-link {
max-width: none !important; /* No maximum width on larger screens */
}
.uploaded-financial-container {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.uploaded-financial-container .download-link {
flex: 0 1 auto !important; /* Allow link to take necessary space */
}
}
@media (min-width: 992px) {
.uploaded-financial-container {
padding: 6px 4px !important; /* More padding on larger screens */
}
}
/* Override any ellipsis or truncation */
.uploaded-financial-container .download-link {
text-overflow: clip !important;
overflow: visible !important;
}
/* Fix for file size indicator display */
.uploaded-financial-container .download-link span,
.uploaded-financial-container .download-link small {
display: inline !important;
white-space: normal !important;
}
/* Responsive adjustments */
@media (max-width: 768px) {
/* Stack items vertically on smaller screens */
#collapse8 #uploadedFinExp,
#collapse8 .uploaded-financial-container {
flex-direction: column !important;
align-items: flex-start !important;
}
/* Allow download link to take full width */
#collapse8 #ctl00_MainContent_myUC_FinExpHyperLink,
#collapse8 .download-link {
max-width: 100% !important;
margin-bottom: 10px !important;
}
/* Adjust delete button positioning */
#collapse8 #ctl00_MainContent_myUC_FinExpAttachmentRemoveButton,
#collapse8 .btn-outline-danger {
align-self: flex-end !important;
margin-left: 0 !important;
}
}
.achievement-container {
background-color: #ffffff !important;
border-radius: 8px !important;
padding: 10px !important;
margin: 5px 0 !important;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
border: 1px solid #e5e7eb !important;
transition: all 0.2s ease !important;
}
.achievement-container:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
border-color: #d1d5db !important;
}
.achievement-container textarea {
border: 1px solid #e5e7eb !important;
border-radius: 4px !important;
padding: 10px !important;
width: 100% !important;
}
.achievement-container textarea:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
outline: none !important;
}
/* Unified Upload Section - Simple Enhancement */
.unified-upload-section {
background-color: #f9fafb !important;
border: 2px dashed #d1d5db !important;
border-radius: 6px !important;
padding: 16px !important;
margin-top: 12px !important;
transition: all 0.2s ease !important;
}
.unified-upload-section:hover {
border-color: #3b82f6 !important;
background-color: #f3f4f6 !important;
}
/* File Input Styling */
.unified-upload-section .custom-file-label {
background-color: #ffffff !important;
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
color: #4b5563 !important;
}
.unified-upload-section .custom-file-label::after {
background-color: #3b82f6 !important;
color: white !important;
border: none !important;
}
/* Buttons Enhancement */
.unified-upload-section .btn-primary,
.achievement-container .btn-primary {
background-color: #3b82f6 !important;
border: none !important;
border-radius: 4px !important;
transition: background-color 0.2s ease !important;
}
.unified-upload-section .btn-primary:hover,
.achievement-container .btn-primary:hover {
background-color: #2563eb !important;
}
/* Quarterly Financial Report - Side-by-side uploads */
.quarterly-uploads-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.quarterly-upload-column {
flex: 1;
min-width: 280px;
}
.quarterly-upload-column .unified-upload-section {
margin-top: 0 !important;
height: 100%;
}
@media (max-width: 768px) {
.quarterly-uploads-row {
flex-direction: column;
gap: 16px;
}
.quarterly-upload-column {
min-width: 100%;
}
}
/* Portfolio Report Section Styling */
.portfolio-report-section {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.portfolio-report-section.uploaded {
background-color: #d4edda;
border-color: #28a745;
}
.portfolio-report-section.uploaded .section-header h6 {
color: #155724;
}
.portfolio-report-section .section-header {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #dee2e6;
display: flex;
align-items: center;
justify-content: space-between;
}
.portfolio-report-section .section-header h6 {
margin: 0;
font-weight: 600;
color: #495057;
font-size: 15px;
}
.portfolio-report-section .section-header h6 i {
margin-right: 8px;
}
.portfolio-report-section .badge-required {
background-color: #dc3545;
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.portfolio-report-section.uploaded .badge-required {
background-color: #28a745;
}
/* Increase file selector width */
.portfolio-report-section .custom-file-container,
.quarterly-upload-column .custom-file-container,
.financial-summary-container .custom-file-container {
max-width: 100%;
width: 70%;
}
.portfolio-report-section .custom-file,
.quarterly-upload-column .custom-file,
.financial-summary-container .custom-file {
width: 100%;
}
/* File Selector Hover Effects */
.custom-file-label {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.custom-file:hover .custom-file-label,
.custom-file-label:hover {
border-color: #28a745 !important;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}
.custom-file:focus-within .custom-file-label {
border-color: #28a745 !important;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}
/* Financial Summary Section Uploaded State */
.financial-summary-container.uploaded {
background-color: #d4edda;
border-color: #28a745;
border-radius: 8px;
padding: 15px;
}
.additional-attachments-section {
background-color: #ffffff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
}
.additional-attachments-section .section-header {
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #dee2e6;
}
.additional-attachments-section .section-header h6 {
margin: 0;
font-weight: 600;
color: #495057;
font-size: 15px;
}
/* Text Input Cursor Styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
.form-control,
.modern-textarea,
[contenteditable="true"] {
cursor: text;
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
textarea:hover,
.form-control:hover,
.modern-textarea:hover,
[contenteditable="true"]:hover {
cursor: text;
}
/* Review Notes Image Overflow Fix */
.review-notes td,
.review-notes th {
max-width: 500px;
overflow: hidden;
word-wrap: break-word;
word-break: break-word;
}
.review-notes td img,
.review-notes img {
max-width: 100%;
max-height: 300px;
height: auto;
width: auto;
object-fit: contain;
display: block;
margin: 8px 0;
border-radius: 4px;
}
.review-notes td p,
.review-notes td div {
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
.review-notes .table {
table-layout: fixed;
width: 100%;
}
/* Review Notes column widths. Hidden (Visible="false") columns are not rendered, so the
visible order is: 1 Review Comments, 2 Action, 3 Attachment, 4 Review Date, 5 Comments By.
The comment column carries the most content, so it gets the space; the rest stay compact. */
.review-notes .table td:nth-child(1),
.review-notes .table th:nth-child(1) {
width: 50%;
white-space: normal;
}
.review-notes .table td:nth-child(2),
.review-notes .table th:nth-child(2) {
width: 14%;
}
.review-notes .table td:nth-child(3),
.review-notes .table th:nth-child(3) {
width: 10%;
}
.review-notes .table td:nth-child(4),
.review-notes .table th:nth-child(4) {
width: 13%;
}
.review-notes .table td:nth-child(5),
.review-notes .table th:nth-child(5) {
width: 13%;
}
/* Empty State / No Results Styling */
.no-results-container {
width: 100%;
padding: 10px 0;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 25px 20px;
background-color: #f8f9fa;
border: 1px dashed #dee2e6;
border-radius: 8px;
width: 100%;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.empty-state:hover {
border-color: #28a745;
background-color: #f0fdf4;
}
.empty-state-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #e9ecef;
border-radius: 50%;
margin-bottom: 12px;
}
.empty-state-icon svg {
width: 32px;
height: 32px;
stroke: #6c757d;
}
.empty-state-title {
font-size: 16px;
font-weight: 600;
color: #495057;
margin: 0 0 6px 0;
}
.empty-state-description {
font-size: 14px;
color: #6c757d;
margin: 0;
line-height: 1.5;
}
/* Attachment Link Styling */
.attachment-link {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 10px !important;
background-color: #eff6ff !important;
border-radius: 4px !important;
color: #1e40af !important;
text-decoration: none !important;
border: 1px solid #dbeafe !important;
}
.attachment-link:hover {
background-color: #dbeafe !important;
text-decoration: none !important;
}
.custom-spinner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
flex-direction: column;
}
.custom-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 4px solid #ffffff;
animation: spin 1s linear infinite;
}
.spinner-text {
color: white;
margin-top: 15px;
font-weight: 500;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Interactive Accordion with Preserved Color Semantics */
.panel-group#accordion {
transition: all 0.25s ease !important;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07) !important;
border-radius: 6px !important;
overflow: hidden !important;
}
/* Panel hover effect - subtle depth without color change */
.panel-group#accordion .panel:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
}
/* Panel heading transitions - preserves existing colors */
.panel-group#accordion .panel-heading {
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out !important;
position: relative !important;
}
.panel-group#accordion .panel-heading:hover {
transform: translateZ(5px) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
}
/* Title link interactions - no color change */
.panel-group#accordion .panel-title > a {
transition: all 0.2s ease !important;
position: relative !important;
}
/* Smooth arrow rotation */
.panel-group#accordion .panel-title > a::after {
transition: transform 0.3s ease !important;
transform-origin: center center !important;
}
.panel-group#accordion .panel-title > a[aria-expanded="true"]::after {
transform: rotate(180deg) !important;
}
/* Smooth collapse transition */
.panel-group#accordion .panel-collapse {
transition: height 0.3s ease-out !important;
}
/* Panel body styling - subtle transition */
.panel-group#accordion .panel-body {
transition: all 0.25s ease !important;
}
/* Icons animation */
.panel-group#accordion .panel-title > a .panel-icon {
transition: transform 0.2s ease !important;
}
.panel-group#accordion .panel-title > a:hover .panel-icon {
transform: scale(1.15) !important;
}
/* Icon spacing in panel headers */
.panel-group#accordion .panel-title > a i,
.panel-group#accordion .panel-title > a .fa,
.panel-group#accordion .panel-title > a .fas {
margin-right: 10px;
}
/* Focus state - subtle and accessible */
.panel-group#accordion .panel-title > a:focus {
outline: none !important;
/*box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1) !important;*/
}
/* Click effect */
.panel-group#accordion .panel-title > a:active {
transform: scale(0.99) !important;
}
/* Loading overlay enhancement */
.panel-group#accordion .panel-loading-overlay {
backdrop-filter: blur(2px) !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
/* Smooth content reveal */
.panel-group#accordion .panel-collapse.in .panel-body,
.panel-group#accordion .panel-collapse.show .panel-body {
animation: fadeContent 0.3s ease-out !important;
}
@keyframes fadeContent {
from {
opacity: 0.7;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reportactionbuttons {
margin-top: 15px;
padding: 15px 15px 5px 15px;
border-top: 1px solid #e9ecef;
}
.risk-card{
width: 100%;
}
.status-badge.next {
background: #f3f4f6;
color: #374151;
font-weight: 600;
border: 1px solid #d1d5db;
}
/* ===================================================
IMPROVED WORKFLOW DESIGN - STAGE DIFFERENTIATION
=================================================== */
/* Main workflow container */
.workflow-progress {
margin: 0 !important;
padding: 0;
}
.workflow-status {
background: #f8fafc;
border: 1px solid #e2e7ed;
border-radius: 8px;
padding: 5px 5px;
font-size: 13px;
line-height: 1.5;
}
/* Individual status line */
.status-line {
display: flex;
align-items: center;
padding: 4px 0;
justify-content: space-between;
}
.stage-content {
margin-right: auto;
}
.status-line:last-child {
margin-bottom: 0;
}
/* Status icon styling */
.status-icon {
width: 18px;
height: 14px;
margin-right: 0px;
margin-top: 4px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.status-icon-2 {
width: 18px;
height: 14px;
margin-right: 0px;
margin-top: 2px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.status-icon.completed {
color: #059669;
}
.status-icon.current {
color: #2563eb;
animation: pulse-icon 2s infinite;
}
.status-icon.pending {
color: #9ca3af;
}
.status-icon-2.completed {
color: #059669;
}
.status-icon-2.current {
color: #2563eb;
animation: pulse-icon 2s infinite;
}
.status-icon-2.pending {
color: #9ca3af;
}
@keyframes pulse-icon {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Status content container */
.status-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Status text line container for inline styling */
.status-text-line {
font-size: 13px;
line-height: 1.4;
color: #374151;
}
/* Inline stage title styling (Draft, Submitted, etc.) */
.stage-title-inline {
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline;
padding: 2px 2px;
border-radius: 4px;
background-color: rgba(79, 70, 229, 0.05);
border: 1px solid rgba(79, 70, 229, 0.1);
margin-right: 1px;
position: relative;
}
.stage-title-inline.current {
background: linear-gradient(135deg, #dc2626, #ea580c);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: rgba(220, 38, 38, 0.08);
border: 1px solid rgba(220, 38, 38, 0.15);
font-weight: 800;
}
.stage-title-inline.pending {
background: #9ca3af;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: #999;
border: 1px solid rgba(156, 163, 175, 0.1);
}
/* Completed state for inline titles */
.completed .stage-title-inline {
background: linear-gradient(135deg, #059669, #047857);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: rgba(5, 150, 105, 0.05);
border: 1px solid rgba(5, 150, 105, 0.1);
}
/* Separator styling */
.stage-separator {
font-weight: 600;
color: #6b7280;
margin: 0 4px 0 2px;
font-size: 14px;
}
.current .stage-separator {
color: #dc2626;
}
.completed .stage-separator {
color: #059669;
}
.pending .stage-separator {
color: #9ca3af;
}
/* Inline stage detail styling (database information) */
.stage-detail-inline {
font-size: 12px;
color: #6b7280;
font-weight: 400;
font-style: italic;
}
.current .stage-detail-inline {
color: #1e40af;
font-weight: 500;
}
.completed .stage-detail-inline {
color: #166534;
}
.pending .stage-detail-inline {
color: #9ca3af;
}
/* Emphasis for user names and dates within inline details */
.stage-detail-inline b {
color: #374151;
font-weight: 600;
font-style: normal;
}
.stage-detail-inline i {
color: #6b7280;
font-style: italic;
}
.current .stage-detail-inline b {
color: #1d4ed8;
}
.current .stage-detail-inline i {
color: #3730a3;
}
.completed .stage-detail-inline b {
color: #15803d;
}
.completed .stage-detail-inline i {
color: #166534;
}
.pending .stage-detail-inline b {
color: #6b7280;
}
.pending .stage-detail-inline i {
color: #9ca3af;
}
/* Stage title styling (Draft, Submitted, etc.) */
.stage-title {
font-weight: 600;
font-size: 14px;
color: #1f2937;
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
margin-bottom: 2px;
}
.stage-title.current {
background: linear-gradient(135deg, #dc2626, #ea580c);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.stage-title.pending {
background: #9ca3af;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Stage detail styling (database information) */
.stage-detail {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
font-weight: 400;
background: #f9fafb;
padding: 4px 8px;
border-radius: 4px;
border-left: 3px solid #e5e7eb;
margin-top: 2px;
}
.current .stage-detail {
background: #eff6ff;
border-left-color: #3b82f6;
color: #1e40af;
}
.completed .stage-detail {
background: #f0fdf4;
border-left-color: #22c55e;
color: #166534;
}
.pending .stage-detail {
background: #f9fafb;
border-left-color: #d1d5db;
color: #9ca3af;
}
/* Emphasis for user names and dates */
.stage-detail b {
color: #374151;
font-weight: 600;
}
.stage-detail i {
color: #6b7280;
font-style: italic;
}
.current .stage-detail b {
color: #1d4ed8;
}
.current .stage-detail i {
color: #3730a3;
}
.completed .stage-detail b {
color: #15803d;
}
.completed .stage-detail i {
color: #166534;
}
/* Status badges container */
.status-badges {
display: flex;
align-items: center;
gap: 6px;
margin-left: 8px;
flex-shrink: 0;
}
/* Badge styling */
.status-badge {
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.status-badge.current {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #1e40af;
border: 1px solid #93c5fd;
box-shadow: 0 1px 2px rgba(59, 130, 246, 0.1);
}
.status-badge.completed {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #166534;
border: 1px solid #86efac;
box-shadow: 0 1px 2px rgba(34, 197, 94, 0.1);
}
.status-badge.next {
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
color: #374151;
border: 1px solid #d1d5db;
box-shadow: 0 1px 2px rgba(107, 114, 128, 0.1);
}
.status-badge.days {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
border: 1px solid #f59e0b;
box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1);
}
/* Responsive design */
@media (max-width: 768px) {
.workflow-status {
padding: 4px 4px;
font-size: 12px;
}
.status-line {
margin-bottom: 10px;
}
.status-icon {
width: 16px;
height: 16px;
margin-right: 10px;
font-size: 11px;
}
.status-icon-2 {
width: 16px;
height: 12px;
margin-top: 2px;
font-size: 11px;
}
.stage-title {
font-size: 13px;
}
.stage-detail {
font-size: 11px;
padding: 3px 6px;
}
.status-badges {
flex-direction: row;
align-items: flex-start;
gap: 3px;
margin-left: 6px;
}
.status-badge {
font-size: 9px;
padding: 2px 6px;
}
}
/* Special styling for different workflow states */
.progressive-stage[data-stage="1"] .stage-title {
background: linear-gradient(135deg, #065f46, #047857);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.progressive-stage[data-stage="2"] .stage-title {
background: linear-gradient(135deg, #1e40af, #2563eb);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.progressive-stage[data-stage="3"] .stage-title {
background: linear-gradient(135deg, #7c2d12, #ea580c);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.progressive-stage[data-stage="4"] .stage-title {
background: linear-gradient(135deg, #581c87, #7c3aed);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.progressive-stage[data-stage="5"] .stage-title {
background: linear-gradient(135deg, #166534, #22c55e);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@-webkit-keyframes bounce {
from, 20%, 53%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
@keyframes bounce {
from, 20%, 53%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
.animate__bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
a.cke_button {
height: auto !important;
}
/* CKEditor Firefox Compatibility Fixes */
.cke {
position: relative !important;
z-index: 1 !important;
}
.cke_inner,
.cke_contents,
.cke_wysiwyg_frame {
pointer-events: auto !important;
position: relative !important;
}
.cke_top,
.cke_toolbox,
.cke_toolbar,
.cke_button {
pointer-events: auto !important;
cursor: pointer !important;
}
.cke_editable {
pointer-events: auto !important;
cursor: text !important;
}
#pillar-legend-item-0, .legend-item {
background-color: rgba(255, 255, 255, 0.8);
}
.btn-group {
justify-content: space-between;
display: flex !important;
}
/* ==========================================================================
SIDEBAR FOOTER DROPDOWN ICONS - Differentiated positioning
========================================================================== */
/* Footer nav items - dropdown arrow pushed to right */
.footer-nav-item .menu-link.dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 12px;
}
.footer-nav-item .menu-link.dropdown-toggle::after {
position: relative !important;
right: auto !important;
margin-left: auto;
transform: translateY(0) !important;
opacity: 0.7;
}
.footer-nav-item .menu-link.dropdown-toggle:hover::after {
opacity: 1;
}
.footer-nav-item.active .menu-link.dropdown-toggle::after {
transform: rotate(180deg) !important;
}
/* Expanded sidebar - footer dropdown arrow */
.pro-sidebar:not(.collapsed) .footer-nav-item .menu-link.dropdown-toggle::after {
position: relative !important;
right: auto !important;
transform: rotate(0deg) !important;
}
.pro-sidebar:not(.collapsed) .footer-nav-item.active .menu-link.dropdown-toggle::after {
transform: rotate(180deg) !important;
}
/* Mobile sidebar footer dropdown */
@media (max-width: 768px) {
.mobile-menu-content .footer-nav-item .menu-link.dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-menu-content .footer-nav-item .menu-link.dropdown-toggle::after {
position: relative !important;
right: auto !important;
margin-left: auto;
}
}
/* ==========================================================================
MOBILE INTERVENTION TEXT - Clean without border
========================================================================== */
@media screen and (max-width: 997px) {
.gridview .intervention-text,
.intervention-container .intervention-text,
.intervention-text {
border-left: none !important;
border: none !important;
}
}
/* GLOBAL FOCUS RING - themed soft halo (FSD Africa green) instead of the
harsh browser-default outline. Mouse clicks get nothing; keyboard focus
gets the halo via :focus-visible. */
.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
a.btn:focus,
.daisy-upload-btn:focus,
.delete-btn-with-spinner:focus,
.filename-link:focus {
outline: none !important;
box-shadow: none !important;
}
.btn:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="date"]:focus-visible,
select:focus-visible,
textarea:focus-visible,
a.btn:focus-visible,
.daisy-upload-btn:focus-visible,
.delete-btn-with-spinner:focus-visible,
.filename-link:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(69, 114, 105, 0.28),
0 0 0 6px rgba(64, 145, 108, 0.10) !important;
transition: box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Firefox inner dotted ring on submit buttons. */
.btn::-moz-focus-inner,
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
border: 0;
padding: 0;
}
/* ------------------------------------------------------------------------------------------------
Top bar between laptop and tablet.
Measured at 1280 with the sidebar open: sidebar 195, breadcrumb 116, search 501, right group 368
(Daisy 112 + Nyala 108 + AFIYA 82 + profile 50). The breadcrumb and the right group do not flex,
so they demand ~544 with the gaps; the search is `flex: 1 1 0` and absorbs the rest. Below roughly
940px the search has nothing left to give and the row breaks.
Rather than let it break, the right group sheds detail in steps - the sub-label first, then the
name, then the card. The search keeps its width longest because it is the only thing in the bar
that is used rather than navigated to. Nothing is hidden that is not reachable elsewhere: both
tenancy links are in the sidebar footer, and Daisy AI has its own page.
------------------------------------------------------------------------------------------------ */
/* Step 1 - drop the "DIMIS" sub-label under each tenancy card. ~24px back. */
@media (max-width: 1200px) {
.top-bar .nyala-facility-sub,
.top-bar .daisy-ai-subtitle {
display: none;
}
.top-bar .nyala-facility-content,
.top-bar .daisy-ai-content {
justify-content: center;
}
}
/* Step 2 - the cards become their icons. ~130px back, which is the whole search shortfall. */
@media (max-width: 1080px) {
.top-bar .nyala-facility-text,
.top-bar .daisy-ai-title,
.top-bar .daisy-ai-content {
display: none;
}
.top-bar .nyala-facility-container,
.top-bar .daisy-ai-container {
min-width: 0;
}
.top-bar .nyala-facility-link,
.top-bar .daisy-ai-link {
padding-left: 6px;
padding-right: 6px;
}
}
/* Step 3 - below this even two icons are competing with the search, so the pair folds into one
control. The cards go and the switcher arrives at the same breakpoint, so the links are never
duplicated and never lost. */
@media (max-width: 940px) {
.top-bar .nyala-facility-container {
display: none;
}
.top-bar .tenancy-switcher {
display: block;
}
}
/* ------------------------------------------------------------------------------------------------
Tenancy cards, compacted.
Measured before: the Nyala card was 108px wide plus 11px of margin - 36px icon, 8px gap, 46px of
label and 17px of link padding, with 6px/5px margins either side. Two of these plus Daisy AI left
the bar looking crowded at laptop width and ate the slack the search needs.
The icon carries the card, so it shrinks least; the padding and margins around it were the bulk of
the excess. Applies at every width - the stepped rules below only take over once even this is too
much.
------------------------------------------------------------------------------------------------ */
.top-bar .nyala-facility-container {
margin: 0 3px !important;
}
/* Same height as the Daisy AI card beside them - it is 47px, and at 38px these two sat visibly
short of it in the same row. The compaction stays horizontal: the padding either side of the icon
is what was excessive, not the height. */
.top-bar .nyala-facility-link {
border-radius: 8px !important;
padding: 5px 10px 5px 5px !important;
gap: 7px !important;
min-height: 47px !important;
box-sizing: border-box !important;
}
.top-bar .nyala-icon-wrapper,
.top-bar .nyala-icon-main,
.top-bar .nyala-icon-ring,
.top-bar img.nyala-facility-icon {
width: 32px !important;
height: 32px !important;
}
/* The label was rendering at 7.2px, which is below anything readable. */
.top-bar .nyala-facility-text {
font-size: 11px !important;
line-height: 1.25 !important;
}
.top-bar .nyala-facility-sub {
font-size: 9px !important;
line-height: 1.2 !important;
}
/* ------------------------------------------------------------------------------------------------
Tenancy switcher - the two cross-tenancy links as one control.
Hidden above 940px, where the cards themselves fit. Below it this is the only way to the other
tenancies from the bar, so it is a real menu rather than a bare icon: a heading saying what the
list is, each site with its own mark, and the name and sub-label the cards carry at full width.
------------------------------------------------------------------------------------------------ */
.tenancy-switcher {
position: relative;
display: none;
margin: 0 3px;
}
.tenancy-switcher-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--border-color, #e3e8e6);
border-radius: 8px;
background: #fff;
color: var(--primary-color, #457269);
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.tenancy-switcher-toggle:hover,
.tenancy-switcher-toggle[aria-expanded="true"] {
background: var(--light-grey, #f2f5f4);
border-color: var(--primary-color, #457269);
}
.tenancy-switcher-toggle:focus-visible {
outline: 2px solid var(--primary-color, #457269);
outline-offset: 2px;
}
/* Right-aligned so it cannot push off the edge of a narrow viewport. */
.tenancy-switcher-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1100;
min-width: 208px;
padding: 6px;
border: 1px solid var(--border-color, #e3e8e6);
border-radius: 10px;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.tenancy-switcher.is-open .tenancy-switcher-menu {
display: block;
}
.tenancy-switcher-heading {
display: block;
padding: 6px 10px 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mid-dark-grey, #6b7671);
}
.tenancy-switcher-item {
color: #333;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
text-decoration: none;
color: var(--text-primary, #1c2521);
}
.tenancy-switcher-item:hover,
.tenancy-switcher-item:focus-visible {
background: var(--light-grey, #f2f5f4);
text-decoration: none;
}
.tenancy-switcher-item img {
width: 26px;
height: 26px;
flex: 0 0 auto;
object-fit: contain;
}
.tenancy-switcher-label {
display: flex;
flex-direction: column;
line-height: 1.25;
}
/* #333, which is what this app already renders body text as on a white surface - not
var(--text-primary). That token is #ffffff: it is the colour of text on the green chrome, and the
menu sits on white, so the name came out white-on-white while the sub-label, which sets its own
colour, stayed readable. The fallback in var() never fired because the token IS defined. */
.tenancy-switcher-menu .tenancy-switcher-name {
font-size: 13px;
font-weight: 600;
color: #333;
}
.tenancy-switcher-menu .tenancy-switcher-sub {
font-size: 11px;
color: var(--mid-dark-grey, #6b7671);
}
/* Touch targets on a phone, where this is the only route to the other tenancies. */
@media (max-width: 576px) {
.tenancy-switcher-menu {
min-width: 232px;
}
.tenancy-switcher-item {
padding: 11px 10px;
}
}
/* ---------------------------------------------------------------------------
Pillar badge text size
---------------------------------------------------------------------------
The badge sits in the same grid row as the intervention name, one step below
it so the chip reads as a label rather than competing with the name. Every
earlier rule sized this in rem - and the root font-size on these pages is
10px, not 16px, so 0.85rem rendered at 8.5px against the cell's 14px. Stated
in px here, last in the file, because the value has to survive the eighteen
earlier declarations across three sheets. The family is inherited so the chip
can never drift from the table it sits in. */
.pillar-badge,
.pillar-dropdown .pillar-badge,
.pillar-badge .pillar-name {
font-family: inherit;
font-size: 13px;
}
@media screen and (max-width: 1200px) {
.pillar-badge,
.pillar-dropdown .pillar-badge,
.pillar-badge .pillar-name {
font-size: 12px;
}
}
@media screen and (max-width: 768px) {
.pillar-badge,
.pillar-dropdown .pillar-badge,
.pillar-badge .pillar-name {
font-size: 11px;
}
}
@media screen and (max-width: 480px) {
.pillar-badge,
.pillar-dropdown .pillar-badge,
.pillar-badge .pillar-name {
font-size: 10px;
}
}
/* Long report names in the top bar: the page title and the breadcrumb keep to one line each. The current item
shortens with "..." and keeps its period suffix (setBreadcrumbLabel in each master); the parents keep size. */
.page-header-wrapper,
.page-header-title,
.breadcrumb-nav {
min-width: 0;
}
.page-header-title h1 {
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.breadcrumb {
flex-wrap: nowrap !important;
min-width: 0;
}
.breadcrumb > .breadcrumb-item {
flex: 0 0 auto;
}
/* No overflow: hidden here - the "/" separator sits just outside the item and would be clipped */
.breadcrumb > .breadcrumb-item.active {
flex: 0 1 auto;
min-width: 0;
white-space: nowrap;
}
.bc-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bc-suffix {
flex: 0 0 auto;
white-space: nowrap;
}
/* Compact breadcrumb so more of a long name shows: tighter title-box padding and pills, no trailing margin
on the icon-only Home link, and the "/" centred in the gap whatever its glyph width (the slash leans
right, so a fixed offset left it touching the dark current pill) */
.page-header-wrapper {
padding: 4px 8px;
}
.breadcrumb {
--bc-gap: 16px;
gap: var(--bc-gap);
}
.breadcrumb-item + .breadcrumb-item::before {
left: calc(var(--bc-gap) / -2);
transform: translateX(-50%);
font-size: 13px;
}
.breadcrumb-item a,
.breadcrumb-item.active {
padding: 3px 8px;
font-size: 11px;
}
.breadcrumb-item a .fa-home {
margin-right: 0;
font-size: 11px;
}
/* Title and breadcrumb text in px with a 13px ceiling (the rem sizes resolved against a 10px root) */
.page-header-title h1 {
font-size: 13px;
}
/* The title block takes at most 38% of the bar, so a long name never squeezes the search box */
@media (min-width: 769px) {
.top-bar .page-header-wrapper {
flex: 0 1 auto;
max-width: 38%;
}
}