/* ===== UNIVERSAL GRID LAYOUT ===== */
#mainLayout {
    height: calc(100vh - 60px);
    display: grid;
    grid-template-columns: 1fr 0; /* Default: Mapping template (no left panel) */
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mainLayout.has-left-panel {
    grid-template-columns: 220px 1fr 0; /* Operations template (with left panel) */
}

#mainLayout.panel-open {
    grid-template-columns: 1fr 400px; /* Mapping with right panel open */
}

#mainLayout.has-left-panel.panel-open {
    grid-template-columns: 220px 1fr 400px; /* Operations with right panel open */
}

/* ===== PANEL SYSTEM ===== */
.panel {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: calc(100vh - 60px);
    position: relative;
    background: var(--i3d-white-98);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05);
    flex-direction: column;
}

.panel.collapsed {
    width: 60px;
}

.panel-header {
    height: 60px;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.05), rgba(8, 145, 178, 0.03));
    border-bottom: 1px solid rgba(12, 74, 110, 0.1);
}

.panel-header-content {
    padding-left: 0;
}

.panel-icon-container {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--portalThemeColor1);
}

.panel-icon-container i {
    font-size: 24px;
    transition: transform 0.2s ease;
}

.panel-header-content span {
    margin-left: 8px;
    flex-grow: 1;
}

.panel-footer {
    height: 10px;
    padding: 0.75rem;
    position: sticky;
    bottom: 0;
    z-index: 100;
    flex-shrink: 0;
    background: rgba(248, 250, 252, 0.8);
    border-top: 1px solid rgba(12, 74, 110, 0.1);
}

.panel-body {
    height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 8px 2px;
}

/* ===== LEFT PANEL NAVIGATION (Operations Template) ===== */
.panel-left {
    width: 220px !important;
    display: flex;
    background: white;
    border-right: 1px solid #dee2e6;
}

.panel-left .panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 8px 2px;
}

.panel-left .list-group {
    border-radius: 0;
    box-shadow: none;
}

.panel-left .list-group-item {
    height: 60px;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    border-left: 4px solid transparent;
    margin: 3px 6px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--portalThemeColor8);
    width: 95%;
    font-weight: 600;
    gap: 12px;
}

.panel-left .list-group-item:hover {
    background: rgba(255, 255, 255, 0.9);
    border-left-color: var(--portalThemeColor1);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.1);
}

.panel-left .list-group-item.active {
    background: rgba(8, 145, 178, 0.05);
    border-left-color: var(--portalThemeColor1);
    color: var(--portalThemeColor8);
    margin-left: 12px;
}

.panel-left .list-group-item.active:hover {
    background: var(--portalThemeColor6);
    transform: translateX(4px);
}

.panel-left .list-group-item i {
    font-size: 20px;
    color: var(--portalThemeColor1);
    transition: all 0.2s ease;
    width: 26px;
    text-align: center;
}

.panel-left .list-group-item:hover i {
    transform: scale(1.1);
    color: var(--portalThemeColor4);
}

.panel-left.collapsed .list-group-item.active {
    margin-left: 5px;
}

/* ===== COLLAPSED STATE UTILITIES ===== */
.collapsed .hide-when-collapsed {
    display: none !important;
}

.collapsed .show-when-collapsed {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.collapsed .show-when-collapsed i {
    font-size: 24px;
    color: var(--portalThemeColor1);
}

/* ===== VIEWER CONTAINERS ===== */
.viewer-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

.viewer-container.active {
    display: block;
}

/* ===== BACK BUTTONS FOR VIEWERS ===== */
.viewer-back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: var(--i3d-white-98);
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--i3d-black-15);
    transition: all 0.2s ease;
}

.viewer-back-button:hover {
    background: var(--portalThemeColor7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--i3d-black-15);
}

/* ===== LOADER OVERLAY ===== */
.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.55), rgba(8, 145, 178, 0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

.loader-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* ===== UNIFIED SIDE PANEL HEADERS ===== */
.header-search-view-all {
    padding: 12px 16px;
    border-top: 2px solid var(--i3d-cyan-25);
    background: var(--i3d-cyan-10);
    color: var(--portalThemeColor1);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.header-search-view-all:hover {
    background: var(--i3d-cyan-25);
    color: var(--portalThemeColor4);
}

.header-search-view-all i {
    transition: transform 0.2s ease;
}

.header-search-view-all:hover i {
    transform: translateX(4px);
}

.side-panel-header {
    height: 60px;
    padding: 0 16px;
    background: white;
    border-top: 1px solid var(--i3d-gray-20);
    border-bottom: 1px solid var(--i3d-gray-20);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.side-panel-title {
    color: var(--portalThemeColor8);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    margin-right: 6px;
    letter-spacing: -0.025em;
}

.side-panel-close {
    background: var(--i3d-gray-10) !important;
    border: 1px solid var(--i3d-gray-30) !important;
    border-radius: 6px;
    color: var(--portalThemeColor8) !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.side-panel-close:hover {
    background: var(--i3d-gray-20) !important;
    border-color: var(--i3d-gray-40) !important;
    transform: scale(1.05);
}

.side-panel-close i {
    font-size: 16px;
}

/* ===== ADMIN PAGE ACCORDIONS  ===== */
#i3dAdminAccordion .accordion-header h3 { color: var(--portalThemeColor4); font-size: 1.2em; font-weight: 700; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 2px solid var(--i3d-cyan-25); }
#i3dAdminAccordion .accordion-header { padding: 0 16px !important; cursor: pointer; }
#i3dAdminAccordion .accordion-header { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
#i3dAdminAccordion .accordion-header::before {
  content: '\f055';
  font-family: 'Font Awesome 7 Pro';
  font-weight: 900;
  font-size: 0.9em;
  color: var(--portalThemeColor4);
  transition: all 0.2s ease;
  margin-right: 12px;
}

#i3dAdminAccordion .accordion-header[aria-expanded="true"]::before {
  content: '\f056';
}
#i3dAdminAccordion .accordion-header {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* ===== ENHANCED FORM CHECKS & SWITCHES ===== */
.form-check { padding-left: 2.5rem; margin-bottom: 0.75rem; display: flex; align-items: center; }
.form-check-input { width: 1.25rem; height: 1.25rem; margin-top: 0; margin-left: -2.5rem; margin-right: 0.75rem; background-color: var(--i3d-gray-20); border: 1px solid var(--i3d-gray-30); border-radius: 4px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; flex-shrink: 0; }
.form-check-input:hover { border-color: var(--i3d-cyan-35); background-color: var(--i3d-gray-15); }
.form-check-input:focus { border-color: var(--portalThemeColor1); box-shadow: 0 0 0 3px var(--i3d-cyan-25); outline: none; }
.form-check-input:checked { background-color: var(--portalThemeColor1); border-color: var(--portalThemeColor1); box-shadow: 0 2px 6px var(--i3d-cyan-35); }
.form-check-input:checked:hover { background-color: var(--portalThemeColor4); border-color: var(--portalThemeColor4); }
/* Label Styling */
.form-check-label { color: var(--portalThemeColor8); font-weight: 500; cursor: pointer; transition: color 0.2s ease; line-height: 1.25rem; }
.form-check-label:hover { color: var(--portalThemeColor4); }
.form-check-input:checked ~ .form-check-label { color: var(--portalThemeColor4); font-weight: 600; }
/* Disabled State */
.form-check-input:disabled { background-color: var(--i3d-gray-10); border-color: var(--i3d-gray-20); opacity: 0.6; cursor: not-allowed; }
.form-check-input:disabled ~ .form-check-label { color: var(--portalThemeColor3); opacity: 0.6; cursor: not-allowed; }
/* ===== FORM LABELS ===== */
.form-label { color: var(--portalThemeColor8); font-weight: 500; margin-bottom: 0.5rem; transition: color 0.2s ease; }
.form-label.fw-bold, .form-label.font-weight-bold { color: var(--portalThemeColor4); font-weight: 600; }
.form-label.small { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; }
/* Section headers / group labels */
.form-label.mb-3 { margin-bottom: 0.75rem !important; padding-bottom: 0.5rem; border-bottom: 1px solid var(--i3d-cyan-25); }
/* Switch Specific Styling */
.form-switch .form-check-input { width: 2.5rem; height: 1.25rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-position: left center; border-radius: 2rem; margin-left: -2.5rem; }
.form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

/* ===== POWER PAGES OVERRIDES ===== */
/* body, .main-content { background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4)); } */
main { background: var(--i3d-white-98); box-shadow: -4px 0 16px var(--i3d-cyan-10); }
.fui-FluentProvider3 { border-radius: 10px; }
:root {
--portalThemeColor1: #0284c7 !important;
--portalThemeColor2: #0ea5e9 !important;
--portalThemeColor4: #0c4a6e !important;
--portalThemeColor5: #EFF6FB !important;
--portalThemeColor9: #0369a1 !important;     
--bs-btn-primary-bg: var(--portalThemeColor1);
--bs-btn-primary-border: var(--portalThemeColor1);
--bs-btn-primary-hover-bg: var(--portalThemeColor9);
--bs-btn-primary-hover-border: var(--portalThemeColor9);
--bs-btn-secondary-color: var(--portalThemeColor8);
--bs-btn-secondary-border: var(--portalThemeColor8);
--bs-dropdown-item-padding-y: 10px;
--bs-dropdown-item-padding-x: 16px;
--bs-dropdown-link-hover-bg: var(--i3d-cyan-10);
--bs-dropdown-link-hover-color: var(--portalThemeColor1);    
--i3d-darkblue-05: rgba(12, 74, 110, 0.05);
--i3d-darkblue-10: rgba(12, 74, 110, 0.10);
--i3d-cyan-03: rgba(8, 145, 178, 0.03);    
--i3d-cyan-10: rgba(8, 145, 178, 0.10);
--i3d-cyan-25: rgba(8, 145, 178, 0.25);
--i3d-cyan-35: rgba(8, 145, 178, 0.35);
--i3d-cyan-45: rgba(8, 145, 178, 0.45);
--i3d-cyan-50: rgba(8, 145, 178, 0.45);
--i3d-gray-10: rgba(107, 114, 128, 0.10);
--i3d-gray-15: rgba(107, 114, 128, 0.15);    
--i3d-gray-20: rgba(107, 114, 128, 0.20);
--i3d-gray-30: rgba(107, 114, 128, 0.30);
--i3d-gray-40: rgba(107, 114, 128, 0.40);
--i3d-white-10: rgba(255, 255, 255, 0.10);
--i3d-white-15: rgba(255, 255, 255, 0.15);
--i3d-white-20: rgba(255, 255, 255, 0.20);
--i3d-white-30: rgba(255, 255, 255, 0.30);
--i3d-white-50: rgba(255, 255, 255, 0.50);
--i3d-white-98: rgba(255, 255, 255, 0.98);
--i3d-black-10: rgba(0, 0, 0, 0.10);
--i3d-black-15: rgba(0, 0, 0, 0.15);
--i3d-gray: var(--i3d-gray);      
}
.fa-solid, .fa-regular, .fa-brands, .fa-classic, .fas, .far, .fab, .fal, .fat, .fad, .fadr, .fadl, .fadt, .fass, .fasr, .fasl, .fast, .fasds, .fasdr, .fasdl, .fasdt, .faslr, .faslpr, .fawsb, .fatl, .fans, .fands, .faes, .fajr, .fajfr, .fajdr, .facr, .fa-solid, .fa-semibold, .fa-regular, .fa-light, .fa-thin, .fa-brands, .fa-classic, .fa-duotone, .fa-sharp, .fa-sharp-duotone, .fa-chisel, .fa-etch, .fa-jelly, .fa-jelly-duo, .fa-jelly-fill, .fa-notdog, .fa-notdog-duo, .fa-slab, .fa-slab-press, .fa-thumbprint, .fa-whiteboard, 
.fa { --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Pro")) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; display: var(--fa-display, inline-block); font-family: var(--_fa-family); font-feature-settings: normal; font-style: normal; font-synthesis: none; font-variant: normal; font-weight: var(--fa-style, 900); line-height: 1; text-align: center; text-rendering: auto; width: var(--fa-width, 1.25em); }
/* Enhanced Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--i3d-cyan-50); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--i3d-cyan-35); border-radius: 4px; transition: background 0.2s ease; }
::-webkit-scrollbar-thumb:hover { background: var(--i3d-cyan-50); }
/* Enhanced Typography */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em;}
/* Mini List Styling - Matching Navigation Menu */
.mini-list-item { height: 60px; background: var(--i3d-white-50); border: none; border-left: 4px solid transparent; margin: 3px 0px; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--portalThemeColor8); font-weight: 600; display: flex; align-items: center; padding: 12px 16px; position: relative; }
.mini-list-item:hover { background: var(--i3d-white-98); border-left-color: var(--portalThemeColor1); transform: translateX(3px); box-shadow: 0 2px 8px var(--i3d-cyan-25); } 
.mini-list-item i.item-icon { font-size: 20px; color: var(--portalThemeColor1); transition: all 0.2s ease; width: 26px; text-align: center; margin-right: 12px; flex-shrink: 0; }
.mini-list-item:hover i.item-icon { transform: scale(1.1); color: var(--portalThemeColor4); } 
.mini-list-item-content { flex: 1; min-width: 0;}
.mini-list-item-title { font-size: 14px; font-weight: 600; color: var(--portalThemeColor8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.mini-list-item-subtitle { font-size: 12px; color: var(--i3d-gray); margin: 2px 0 0 0; } 
.mini-list-actions { margin-left: auto; padding-left: 8px; }
.mini-list-actions .dropdown-toggle { background: var(--i3d-cyan-50); border: 1px solid var(--i3d-cyan-25); border-radius: 50%; color: var(--portalThemeColor1); width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; }
.mini-list-actions .dropdown-toggle:hover { background: var(--i3d-cyan-25); border-color: var(--i3d-cyan-35); }
.mini-list-actions .dropdown-toggle::after { display: none; }
.list-header { color: var(--portalThemeColor4); font-size: 1.1em; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--i3d-cyan-25); } 
/* ===== ENHANCED BUTTONS GLOBAL ===== */
.btn-primary,
.button1 { background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4)) !important; border: none !important; border-radius: 8px; color: var(--portalThemeOnColor1) !important; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } 
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.button1:hover,
.button1:focus,
.button1:active,
.button1.active { background: linear-gradient(135deg, var(--portalThemeColor9), var(--portalThemeColor4)) !important; border-color: var(--portalThemeColor9) !important; color: var(--portalThemeOnColor1) !important; transform: translateY(-1px); box-shadow: 0 4px 12px var(--i3d-cyan-45); } 
.modal[class*="delete"] .btn-primary,
.modal[class*="Delete"] .btn-primary { background: linear-gradient(135deg, var(--bs-danger), #b91c1c) !important;color: white !important; } 
.modal[class*="delete"] .btn-primary:hover,
.modal[class*="Delete"] .btn-primary:hover { background: linear-gradient(135deg, #b91c1c, #991b1b) !important; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4); }
.btn-secondary,
.btn-default,
.button2 { background: var(--i3d-cyan-25) !important; border: 1px solid var(--i3d-cyan-35) !important; border-radius: 8px; color: var(--portalThemeColor1) !important; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.button2:hover,
.button2:focus,
.button2:active,
.button2.active { background: var(--i3d-cyan-25) !important; border-color: var(--i3d-cyan-45) !important; color: var(--portalThemeColor4) !important; transform: translateY(-1px); box-shadow: 0 4px 12px var(--i3d-cyan-35); } 
.btn-secondary.dropdown-toggle.show,
.btn-default.dropdown-toggle.show { background: var(--i3d-cyan-25) !important; border-color: var(--i3d-cyan-45) !important; color: var(--portalThemeColor1) !important; }
.btn-outline-primary { background: var(--i3d-cyan-25) !important; border: 1px solid var(--i3d-cyan-35) !important; border-radius: 8px; color: var(--portalThemeColor1) !important; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active { background: var(--i3d-cyan-25) !important; border-color: var(--i3d-cyan-45) !important; color: var(--portalThemeColor4) !important; transform: translateY(-1px); box-shadow: 0 4px 12px var(--i3d-cyan-35); }
.btn { border-radius: 8px; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.btn:focus { outline: 2px solid var(--i3d-cyan-45); outline-offset: 2px; }
.btn:disabled,
.btn.disabled,
button[disabled] { background-color: var(--bs-gray-100) !important; color: var(--portalThemeColor3) !important; border-color: var(--bs-gray-100) !important; pointer-events: none; opacity: 0.65; }
/* ===== DIALOG/MODAL BUTTONS ===== */
.ms-Dialog-main .ms-Button--icon[title*="Close"] { background: var(--i3d-white-15) !important; border: 1px solid var(--i3d-white-30) !important; border-radius: 6px; color: var(--portalThemeColor7) !important; position: absolute; right: 20px; top: 20px; transition: all 0.2s ease; } 
.ms-Dialog-main .ms-Button--icon[title*="Close"]:hover { background: var(--i3d-white-30) !important; border-color: var(--i3d-white-50) !important; color: var(--portalThemeColor7) !important; transform: scale(1.08); box-shadow: 0 2px 8px var(--i3d-black-15); } 
a:not(.btn) { color: var(--portalThemeColor4) !important; font-weight: 600; text-decoration: none !important; transition: color 0.2s ease; }
a:not(.btn):hover { color: var(--portalThemeColor4) !important; background: var(--portalThemeColor5) !important; text-decoration: none !important; } 
.btn-link { color: var(--portalThemeColor1) !important; font-weight: 600; padding: 6px 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none !important; } 
.btn-link:hover,
.btn-link:focus { color: var(--portalThemeColor4) !important; transform: translateY(-1px); box-shadow: 0 0 0 3px var(--i3d-cyan-25); }
/* ===== DEACTIVATE BUTTON - DANGER STYLE ===== */
.deactivate-link.btn,
button.deactivate-link,
button[aria-label="Deactivate"],
button[title="Deactivate"] { background: rgba(220, 38, 38, 0.1) !important; border: 2px solid var(--bs-danger) !important; color: var(--bs-danger) !important; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.deactivate-link.btn:hover,
button.deactivate-link:hover,
button[aria-label="Deactivate"]:hover,
button[title="Deactivate"]:hover { background: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: white !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4); }
.deactivate-link.btn:active,
button.deactivate-link:active,
button[aria-label="Deactivate"]:active,
button[title="Deactivate"]:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3); } 
.deactivate-link.btn .fa-ban,
button[aria-label="Deactivate"] .fa-ban { color: var(--bs-danger); transition: color 0.2s ease; }
.deactivate-link.btn:hover .fa-ban,
button[aria-label="Deactivate"]:hover .fa-ban { color: white; }
/* ===== ACTIVATE BUTTON - SUCCESS STYLE ===== */
.activate-link.btn,
button.activate-link,
button[aria-label="ACTIVATE"],
button[aria-label="Activate"],
button[title="ACTIVATE"],
button[title="Activate"] { background: rgba(34, 197, 94, 0.1) !important; border: 2px solid var(--bs-success) !important; color: var(--bs-success) !important; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.activate-link.btn:hover,
button.activate-link:hover,
button[aria-label="ACTIVATE"]:hover,
button[aria-label="Activate"]:hover,
button[title="ACTIVATE"]:hover,
button[title="Activate"]:hover { background: var(--bs-success) !important; border-color: var(--bs-success) !important; color: white !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); }

.activate-link.btn:active,
button.activate-link:active,
button[aria-label="ACTIVATE"]:active,
button[aria-label="Activate"]:active,
button[title="ACTIVATE"]:active,
button[title="Activate"]:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3); } 
.activate-link.btn .fa-check-square-o,
button[aria-label="ACTIVATE"] .fa-check-square-o,
button[aria-label="Activate"] .fa-check-square-o { color: var(--bs-success); transition: color 0.2s ease; }
.activate-link.btn:hover .fa-check-square-o,
button[aria-label="ACTIVATE"]:hover .fa-check-square-o,
button[aria-label="Activate"]:hover .fa-check-square-o { color: white; }
/* GLOBAL LINKS */
a,
a:hover,
a:focus,
a:active,
a:visited { text-decoration: none !important; }
.ms-CommandBar {
    border-radius: 12px;
    height: 60px;
    border: 1px solid var(--portalThemeColor6);
    background: white;
}

/* Primary Command Buttons - EXCLUDE overflow button */
.ms-CommandBar-primaryCommand .ms-Button:not(.ms-CommandBar-overflowButton) {
    background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4)) !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--portalThemeOnColor1) !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 20px !important;
}

.ms-CommandBar-primaryCommand .ms-Button:not(.ms-CommandBar-overflowButton):hover {
    background: linear-gradient(135deg, var(--portalThemeColor9), var(--portalThemeColor4)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--i3d-cyan-45) !important;
}

/* Style the overflow button separately */
.ms-CommandBar-overflowButton {
    background: var(--i3d-cyan-25);
    border: 1px solid var(--i3d-cyan-35);
    border-radius: 8px;
    margin: 8px 2px;
    color: var(--portalThemeColor1);
    min-width: 40px;
    padding: 8px;
    transition: all 0.2s ease;
}

.ms-CommandBar-overflowButton:hover {
    background: var(--i3d-cyan-25);
    border-color: var(--i3d-cyan-45);
    color: var(--portalThemeColor4);
    transform: scale(1.05);
}

.ms-CommandBar-secondaryCommand .ms-Button,
button[data-testid="viewsMenu"] {
    background: var(--i3d-cyan-25) !important;
    border: 1px solid var(--i3d-cyan-35) !important;
    border-radius: 8px !important;
    color: var(--portalThemeColor1) !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 20px;
}

.ms-CommandBar-secondaryCommand .ms-Button:hover,
button[data-testid="viewsMenu"]:hover {
    background: var(--i3d-cyan-25) !important;
    border-color: var(--i3d-cyan-45) !important;
    color: var(--portalThemeColor4) !important;
    transform: translateY(-1px) !important;
}
/* Dropdown container */
.dropdown-divider { border-color: var(--i3d-cyan-25) !important; margin: 8px 0 !important; }
/* Dropdown headers */
.dropdown-header { padding: 8px 16px !important; color: var(--portalThemeColor8) !important; font-weight: 600 !important; font-size: 0.75rem !important; text-transform: uppercase; letter-spacing: 0.5px; }
.dropdown-menu { border: 1px solid var(--portalThemeColor6) !important; border-radius: 10px !important; padding: 4px 4px !important; box-shadow: 0 8px 32px var(--i3d-cyan-25) !important; min-width: 200px; }
.dropdown-menu > li > a,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { padding: 10px 16px !important; line-height: 1.5 !important; width: calc(100% - 2px) !important; }
.dropdown-item { padding: 10px 16px !important; color: var(--portalThemeColor8) !important; border-radius: 6px !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; background: transparent !important; width: auto !important; line-height: 1.5 !important; } 
/* Hover and focus states */
.dropdown-item:hover, 
.dropdown-item:focus { padding: 10px 16px !important; background: var(--i3d-cyan-10) !important; color: var(--portalThemeColor1) !important; transform: translateX(2px); text-decoration: none !important; } 
/* Active state */
.dropdown-item.active,
.dropdown-item:active { background: var(--i3d-cyan-25) !important; color: var(--portalThemeColor4) !important; }
/* Icons in dropdown items */
.dropdown-item i { width: 16px; text-align: center; margin-right: 8px; flex-shrink: 0; transition: transform 0.2s ease; }
.dropdown-item:hover i { transform: scale(1.1); }
/* Danger/destructive actions */
.dropdown-item.text-danger { color: var(--bs-danger) !important; }
.dropdown-item.text-danger:hover { background: rgba(var(--bs-danger-rgb), 0.08) !important; color: var(--bs-danger) !important; } 

/* But add scrolling back to the parent section if needed */
.section.entity_form section {
    overflow-x: auto;
}
/* ===== ENHANCED FORMS ===== */
.form-control { background: var(--i3d-white-98); border: 1px solid var(--i3d-gray-30);  }
.form-control:focus { border-color: var(--portalThemeColor1); box-shadow: 0 0 0 3px var(--i3d-cyan-25); background: white; }
.form-control:disabled,
.form-control[readonly] { background: var(--i3d-gray-10); color: var(--i3d-gray); border-color: var(--i3d-gray-20); }
/* ===== FOCUS MANAGEMENT ===== */
*:focus { outline: 2px solid var(--i3d-cyan-45); outline-offset: 2px; }
/* ===== ENHANCED NOTES & ATTACHMENTS ===== */
.note { background: var(--i3d-white-98); border: 1px solid var(--i3d-gray-20); padding: 16px;  margin-bottom: 16px; transition: all 0.2s ease; } 
.note:hover { background: var(--i3d-white-98); border-color: var(--i3d-cyan-35); box-shadow: 0 2px 8px var(--i3d-cyan-10); } 
.note .metadata { color: var(--i3d-gray); font-size: 12px;}
.note .postedon { font-weight: 600; color: var(--portalThemeColor8); margin-bottom: 4px;}
.note .createdby {  font-style: italic; color: var(--i3d-gray); }
.note .content { color: var(--portalThemeColor8); line-height: 1.6;}
 .note .text { font-size: 14px; margin-bottom: 12px; }
/* Attachment Panel styling */
.note .attachment { border-radius: 0 0 8px 8px; padding: 12px; margin-top: 0; border-top: none; word-break: break-word; }
.note .attachment .thumbnail { border: 2px solid var(--i3d-cyan-35); border-radius: 6px; overflow: hidden; }
.note .attachment .link a { color: var(--portalThemeColor1); font-weight: 600; transition: color 0.2s ease; } 
.note .attachment .link a:hover { color: var(--portalThemeColor4); }
.note .toolbar.dropdown { position: absolute; /* top: 12px; */ /* right: 12px; */ }
.note .label-warning { background: rgba(var(--bs-warning-rgb), 0.1); border: 1px solid rgba(var(--bs-warning-rgb), 0.3); color: var(--bs-warning); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.notes-error.message { background: rgba(var(--bs-danger-rgb), 0.1); border: 1px solid rgba(var(--bs-danger-rgb), 0.3); color: var(--bs-danger); }
.notes-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
/* ===== ENHANCED PAGINATION ===== */
/* =====================================================================
   INNOVATE 3D PAGINATION SYSTEM
   
   Overrides Bootstrap 5.3 + Power Pages pagination styling
   Add to Custom Theme CSS
   ===================================================================== */

/* ===== PAGINATION CONTAINER ===== */
.pagination {
    --bs-pagination-padding-x: 0 !important;
    --bs-pagination-padding-y: 0 !important;
    --bs-pagination-bg: transparent !important;
    --bs-pagination-border-color: transparent !important;
    --bs-pagination-hover-bg: transparent !important;
    --bs-pagination-hover-border-color: transparent !important;
    --bs-pagination-focus-bg: transparent !important;
    --bs-pagination-active-bg: transparent !important;
    --bs-pagination-active-border-color: transparent !important;
    --bs-pagination-disabled-bg: transparent !important;
    --bs-pagination-disabled-border-color: transparent !important;
    
    display: flex !important;
    gap: 8px !important;
    padding-left: 0 !important;
    list-style: none !important;
}

/* ===== PAGE ITEMS ===== */
.page-item {
    margin: 0 !important;
}

/* Remove Bootstrap's negative margin hack */
.page-item:not(:first-child) .page-link {
    margin-left: 0 !important;
}

/* ===== PAGE LINKS (Base State) ===== */
.pagination > li > a,
.pagination > li > span,
.page-link {
    background: white !important;
    border: 1px solid var(--i3d-cyan-25) !important;
    border-radius: 8px !important;
    color: var(--portalThemeColor8) !important;
    font-weight: 500 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px var(--i3d-cyan-10) !important;
}

/* ===== HOVER STATE ===== */
.pagination > li > a:hover,
.pagination > li > span:hover,
.page-link:hover {
    background: var(--i3d-cyan-10) !important;
    border-color: var(--i3d-cyan-35) !important;
    color: var(--portalThemeColor1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px var(--i3d-cyan-25) !important;
    text-decoration: none !important;
}

/* ===== FOCUS STATE ===== */
.pagination > li > a:focus,
.pagination > li > span:focus,
.page-link:focus {
    background: var(--i3d-cyan-10) !important;
    border-color: var(--i3d-cyan-35) !important;
    color: var(--portalThemeColor1) !important;
    outline: 2px solid var(--i3d-cyan-45) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px var(--i3d-cyan-25) !important;
    z-index: 3 !important;
}

/* ===== ACTIVE STATE (Current Page) ===== */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus,
.page-item.active .page-link,
.page-link.active {
    background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4)) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px var(--i3d-cyan-45) !important;
    transform: scale(1.05) !important;
    z-index: 3 !important;
}

/* ===== DISABLED STATE ===== */
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.page-item.disabled .page-link,
.page-link.disabled {
    background: var(--i3d-gray-10) !important;
    border-color: var(--i3d-gray-20) !important;
    color: var(--portalThemeColor3) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== PREVIOUS/NEXT BUTTONS ===== */
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span,
.entity-pager-prev-link,
.entity-pager-next-link {
    background: var(--i3d-cyan-10) !important;
    border-color: var(--i3d-cyan-25) !important;
    color: var(--portalThemeColor1) !important;
    font-weight: 600 !important;
    min-width: 80px !important;
    width: auto !important;
    padding: 0 16px !important;
}

.pagination > li:first-child > a:hover,
.pagination > li:first-child > span:hover,
.pagination > li:last-child > a:hover,
.pagination > li:last-child > span:hover,
.entity-pager-prev-link:hover,
.entity-pager-next-link:hover {
    background: var(--i3d-cyan-25) !important;
    border-color: var(--i3d-cyan-35) !important;
    color: var(--portalThemeColor4) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px var(--i3d-cyan-25) !important;
}

/* Override Power Pages removing rounded corners */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 8px !important;
}

/* ===== ELLIPSIS (...) ===== */
.pagination .page-item .page-link[aria-disabled="true"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--portalThemeColor3) !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* ===== PAGINATION NAV WRAPPER ===== */
nav[aria-label*="pagination"] {
    margin-top: 32px;
}

/* ===== POWER PAGES ENTITY LIST PAGINATION ===== */
.entitylist .entity-grid + .pagination,
.entitylist .view-grid + .pagination {
    margin-top: 24px;
    justify-content: center;
}
/* ===== POWER PAGES NATURAL LANGUAGE SEARCH ===== */
.feedback-control-list { display: none !important;}
/* Search Container */
.nlsearchcontainer { background: var(--i3d-black-10) !important; border: 1px solid var(--portalThemeColor6) !important; border-radius: 12px !important; padding: 16px !important; margin-bottom: 0 !important; } 
/* Natural Language Search Textarea */
.nlsearchtextarea { background: var(--i3d-white-98) !important; border: 1px solid var(--i3d-gray-30) !important; border-radius: 8px !important; color: var(--portalThemeColor8) !important; font-family: var(--bs-font-sans-serif) !important; font-size: 14px !important; height: 48px !important; line-height: 1.5 !important; padding: 12px 50px 12px 16px !important; resize: none !important; transition: all 0.2s ease !important; width: 100% !important; margin-bottom: 12px !important; } 
.nlsearchtextarea:focus { background: white !important; border-color: var(--portalThemeColor1) !important; box-shadow: 0 0 0 3px var(--i3d-cyan-25) !important; outline: none !important; }
.nlsearchtextarea::placeholder { color: var(--i3d-gray) !important; font-style: italic !important;}
/* Search Suggestion Chips */
.nlsearchcontainer button,
.nlsearchcontainer [role="button"] { background: var(--i3d-black-10) !important; border: 1px solid var(--i3d-cyan-25) !important; border-radius: 20px !important; color: var(--portalThemeColor1) !important; font-size: 12px !important; font-weight: 500 !important; margin: 4px !important; padding: 6px 12px !important; transition: all 0.2s ease !important; }
.nlsearchcontainer button:hover,
.nlsearchcontainer [role="button"]:hover { background: var(--i3d-cyan-25) !important; border-color: var(--i3d-cyan-35) !important; color: var(--portalThemeColor4) !important; } 
/* Search Icon Container */
.rightIcons { top: 24px !important; right: 16px !important;}
.rightIcons svg { color: var(--portalThemeColor1) !important; opacity: 0.7 !important; transition: opacity 0.2s ease !important; }
.rightIcons [role="button"]:hover svg { opacity: 1 !important; }
/* Suggestions Label */
.nlsearchcontainer div[style*="Suggestions"] { color: var(--portalThemeColor8) !important; font-weight: 600 !important; margin-bottom: 8px !important; }
/* Suggestion Chips */
.nlsearchcontainer [role="button"][title] { background: var(--i3d-white-98) !important; border: 1px solid var(--i3d-cyan-25) !important; border-radius: 20px !important; color: var(--portalThemeColor1) !important; font-size: 12px !important; font-weight: 500 !important; height: auto !important; margin: 2px 4px !important; max-width: 200px !important; padding: 6px 12px !important; transition: all 0.2s ease !important; width: auto !important; }
.nlsearchcontainer [role="button"][title]:hover { background: var(--i3d-cyan-25) !important; border-color: var(--i3d-cyan-35) !important; color: var(--portalThemeColor4) !important; transform: translateY(-1px) !important; }  
.nlsearchcontainer button[aria-label*="Refresh"] { background: var(--i3d-cyan-25) !important; border: 1px solid var(--i3d-cyan-25) !important; border-radius: 50% !important; color: var(--portalThemeColor1) !important; height: 32px !important; padding: 4px !important; transition: all 0.2s ease !important; width: 32px !important; } 
.nlsearchcontainer button[aria-label*="Refresh"]:hover { background: var(--i3d-cyan-25) !important; border-color: var(--i3d-cyan-35) !important; transform: scale(1.05) !important; }
/* ===== FLUENT UI CONTEXT MENUS (Action Button Menus) ===== */
/* Context menu container */
.ms-ContextualMenu-Callout { border: 1px solid var(--portalThemeColor6) !important;  border-radius: 10px !important; box-shadow: 0 8px 32px var(--i3d-cyan-25) !important; } 
/* Menu container */
.ms-ContextualMenu-container { background: rgba(255, 255, 255, 0.98) !important; border-radius: 10px !important; padding: 4px !important; }
/* Menu list */
.ms-ContextualMenu-list { padding: 0 !important; } 
/* Menu items */
.ms-ContextualMenu-item { margin: 2px 0 !important;}
/* Menu item links/buttons */
.ms-ContextualMenu-link { background: transparent !important; border-radius: 6px !important; color: var(--portalThemeColor8) !important; height: auto !important; line-height: 1.5 !important; padding: 10px 12px !important; transition: all 0.2s ease !important; }
/* Hover state */
.ms-ContextualMenu-link:hover { background: var(--i3d-cyan-10) !important; color: var(--portalThemeColor1) !important; transform: translateX(2px) !important; } 
/* Active/selected state */
.ms-ContextualMenu-link.is-checked, .ms-ContextualMenu-link:active { background: var(--i3d-cyan-25) !important; color: var(--portalThemeColor4) !important; } 
/* Link content container */
.ms-ContextualMenu-linkContent { display: flex !important; align-items: center !important; gap: 8px !important; }
/* Icons in menu items */
.ms-ContextualMenu-icon { color: var(--portalThemeColor4) !important; font-size: 16px !important; width: 16px !important; margin: 0 !important; flex-shrink: 0 !important; transition: transform 0.2s ease !important; }
.ms-ContextualMenu-link:hover .ms-ContextualMenu-icon { color: var(--portalThemeColor1) !important; transform: scale(1.1) !important; }
/* Item text/label */
.ms-ContextualMenu-itemText { margin: 0 !important; flex-grow: 1 !important; }
/* Dividers between menu items */
.ms-ContextualMenu-divider { background-color: var(--i3d-darkblue-10) !important; height: 1px !important; margin: 4px 8px !important; }
/* Disabled menu items */
.ms-ContextualMenu-link.is-disabled,
.ms-ContextualMenu-link[aria-disabled="true"] { background: transparent !important; color: var(--portalThemeColor3) !important; cursor: not-allowed !important; opacity: 0.6 !important; } 
.ms-ContextualMenu-link.is-disabled:hover,
.ms-ContextualMenu-link[aria-disabled="true"]:hover { background: transparent !important; transform: none !important; }
/* Danger/destructive actions (like Deactivate, Delete) */
.ms-ContextualMenu-link[aria-label*="Delete"]:hover,
.ms-ContextualMenu-link[aria-label*="Remove"]:hover,
.ms-ContextualMenu-link[aria-label*="Deactivate"]:hover { background: rgba(var(--bs-danger-rgb), 0.08) !important; border: 1px solid rgba(var(--bs-danger-rgb), 0.3) !important;color: var(--bs-danger) !important; }
.ms-ContextualMenu-link[aria-label*="Delete"]:hover .ms-ContextualMenu-icon,
.ms-ContextualMenu-link[aria-label*="Remove"]:hover .ms-ContextualMenu-icon,
.ms-ContextualMenu-link[aria-label*="Deactivate"]:hover .ms-ContextualMenu-icon { color: var(--bs-danger) !important; }
/* Focus state for accessibility */
.ms-ContextualMenu-link:focus { outline: 2px solid var(--i3d-cyan-50) !important; outline-offset: -2px !important; }
/* Focus state for danger/destructive actions */
.ms-ContextualMenu-link[aria-label*="Delete"]:focus,
.ms-ContextualMenu-link[aria-label*="Remove"]:focus,
.ms-ContextualMenu-link[aria-label*="Deactivate"]:focus { outline: 2px solid rgba(var(--bs-danger-rgb), 0.5) !important; outline-offset: -2px !important;}
/* ===== POWER PAGES FILTER CALLOUTS ===== */
.ms-Callout { background: var(--i3d-white-98) !important; border: 1px solid var(--portalThemeColor6) !important; border-radius: 8px !important;  box-shadow: 0 8px 32px var(--i3d-cyan-25) !important; } 
/* Callout Beak (Arrow) */
.ms-Callout-beak { background-color: var(--i3d-white-98) !important; border: 1px solid var(--portalThemeColor6) !important; } 
/* Callout Beak Curtain */
.ms-Callout-beakCurtain { background-color: var(--i3d-white-98) !important; border-radius: 8px !important; } 
/* Callout Main Content */
.ms-Callout-main { background-color: var(--i3d-white-98) !important; border-radius: 8px !important; padding: 8px !important; }
/* Filter Header */
.ms-Callout-main h3 { color: var(--portalThemeColor4) !important; font-weight: 600 !important; margin-bottom: 12px !important; }
/* Filter Dropdown */
.ms-Callout .ms-Dropdown { margin-bottom: 16px !important;} 
.ms-Callout .ms-Dropdown-title { background-color: var(--i3d-white-98) !important; border: 1px solid var(--i3d-gray-30) !important; border-radius: 6px !important; color: var(--portalThemeColor8) !important; height: 36px !important; line-height: 34px !important; transition: all 0.2s ease !important; } 
.ms-Callout .ms-Dropdown:hover .ms-Dropdown-title { border-color: var(--i3d-cyan-35) !important; } 
.ms-Callout .ms-Dropdown-caretDown { color: var(--portalThemeColor1) !important; }
/* Primary buttons in callouts/filters */
.ms-Callout .ms-Button--primary { background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4)) !important; border: none !important; border-radius: 6px !important; color: var(--portalThemeOnColor1) !important; font-weight: 600 !important; transition: all 0.2s ease !important; } 
.ms-Callout .ms-Button--primary:hover { background: linear-gradient(135deg, var(--portalThemeColor9), var(--portalThemeColor4)) !important; transform: translateY(-1px) !important; } 
.ms-Callout .ms-Button--primary.is-disabled { background: var(--i3d-gray-10) !important; color: var(--portalThemeColor3) !important; cursor: not-allowed !important; }
.ms-Callout .ms-Button--default { background: var(--i3d-gray-10) !important;  border: 1px solid var(--i3d-gray-30) !important; border-radius: 6px !important; color: var(--portalThemeColor8) !important; font-weight: 500 !important; transition: all 0.2s ease !important; }
.ms-Callout .ms-Button--default:hover { background: var(--i3d-gray-15) !important; border-color: var(--i3d-gray-40) !important; } 
/* Icon buttons in callouts (close, etc) */
.ms-Callout .ms-Button--icon { background: var(--i3d-gray-10) !important; border: 1px solid var(--i3d-gray-20) !important; border-radius: 4px !important; color: var(--portalThemeColor4) !important; transition: all 0.2s ease !important; }
.ms-Callout .ms-Button--icon:hover { background: var(--i3d-gray-15) !important; color: var(--portalThemeColor4) !important; scale: 1.1; }
/* ===== POWER PAGES ENTITY FORMS ===== */
/* Form Instructions */
#EntityFormControl .instructions,
#mainContent .instructions { background: linear-gradient(135deg, var(--i3d-darkblue-05), var(--i3d-cyan-03)) !important; border: 1px solid var(--portalThemeColor6); border-radius: 8px; color: var(--portalThemeColor4); font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 12px 16px; }
/* Form Container */
.crmEntityFormView { background: var(--i3d-white-98); border-radius: 12px; padding: 12px;} 
/* Tab Container */
.crmEntityFormView .tab { margin-bottom: 20px; }
/* Fieldsets */
.crmEntityFormView fieldset { background: var(--i3d-white-50); border: 1px solid var(--i3d-cyan-25); border-radius: 12px; margin-bottom: 16px; padding: 16px; } 
/* Section Headers */
.crmEntityFormView .section-title h3 { color: var(--portalThemeColor4); font-size: 1.2em; font-weight: 700; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 2px solid var(--i3d-cyan-25); }
/* Field Labels */
.table-info, .crmEntityFormView .field-label { color: var(--portalThemeColor8); display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.crmEntityFormView .cell .description { color: var(--bs-gray); font-size: 12px; }
/* Required Field Indicator */
.crmEntityFormView .table-info.required .field-label::after { color: var(--bs-danger); content: ' *'; font-weight: 700; }  
/* Form Cells */
.crmEntityFormView .cell { padding: 0 6px 12px; vertical-align: top; }
/* Lookup Field Placeholder */
.crmEntityFormView .input-group .text-muted { color: var(--portalThemeColor3); font-style: italic; }
/* Lookup Launch Button */
.crmEntityFormView .launchentitylookup { background: var(--i3d-cyan-25); border-color: var(--i3d-cyan-35); color: var(--portalThemeColor1); line-height: inherit !important; height: -webkit-fill-available; } 
.crmEntityFormView .launchentitylookup:hover { background: var(--i3d-cyan-25); border-color: var(--i3d-cyan-45); color: var(--portalThemeColor4); }  
/* Picklist/Select Dropdowns */
.crmEntityFormView .picklist { background: var(--i3d-white-98); border: 1px solid var(--i3d-gray-30); border-radius: 8px; color: var(--portalThemeColor8); } 
.crmEntityFormView .picklist:focus { border-color: var(--portalThemeColor1); box-shadow: 0 0 0 3px var(--i3d-cyan-25); }
/* Form Actions Footer */
.crmEntityFormView .actions { border-top: 1px solid var(--portalThemeColor6); margin: 10px 0px; padding-top: 20px; }
/* Form action buttons - only need font-weight */
.crmEntityFormView .actions .btn, .entitylist .view-toolbar .btn { font-weight: 600; } 
.crmEntityFormView .validation-summary { background: rgba(var(--bs-danger-rgb), 0.1); border: 1px solid rgba(var(--bs-danger-rgb), 0.3); border-radius: 8px; color: var(--bs-danger); margin-bottom: 20px; padding: 12px 16px; }
.crmEntityFormView .clearlookupfield { background: rgba(var(--bs-danger-rgb), 0.1); border-color: rgba(var(--bs-danger-rgb), 0.3); color: var(--bs-danger); line-height: inherit !important; height: -webkit-fill-available;}
.crmEntityFormView .clearlookupfield:hover { background: rgba(var(--bs-danger-rgb), 0.15); border-color: rgba(var(--bs-danger-rgb), 0.4); }
 /* Validators */
.crmEntityFormView .validators { color: var(--bs-danger); font-size: 12px; font-weight: 700; margin-top: 4px; }
.alert-danger, .validation-summary { background: rgba(239, 68, 68, 0.1) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; color: var(--bs-danger) !important; } 
.alert-info, .alert-primary { background: var(--i3d-cyan-25) !important; border: 1px solid var(--i3d-cyan-35) !important; color: var(--portalThemeColor4) !important; }
/* ===== CUSTOM THEMED TOOLTIPS ===== */
.tooltip {
    --bs-tooltip-bg: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4));
    --bs-tooltip-color: var(--portalThemeOnColor1);
    --bs-tooltip-padding-x: 12px;
    --bs-tooltip-padding-y: 8px;
    --bs-tooltip-font-size: 0.875rem;
    --bs-tooltip-border-radius: 8px;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 250px;
}

.tooltip-inner {
    background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4));
    color: var(--portalThemeOnColor1);
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px var(--i3d-cyan-45);
    border: 1px solid var(--portalThemeColor7);
}

/* Tooltip arrows - match gradient background */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--portalThemeColor1);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: var(--portalThemeColor1);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--portalThemeColor4);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: var(--portalThemeColor1);
}

/* Smooth fade animation */
.tooltip {
    transition: opacity 0.2s ease-in-out;
}
/* ===== ENHANCED MODALS ===== */
#content-container,
.wrapper-body {
    max-width: -webkit-fill-available !important;
}


.ms-Dialog-main #modalIframe .wrapper-body {
    max-width: -webkit-fill-available !important;
}

.ms-Dialog-main #modalIframe {
 border-radius: 12px !important;
 padding: 0 !important;
}

.modal { --bs-modal-margin: 0.75rem; --bs-modal-padding: 0.75rem; --bs-modal-header-padding: 0.75rem; } 
.modal-header { background: linear-gradient(135deg, var(--portalThemeColor4), var(--portalThemeColor2)); color: white; border-bottom: 1px solid var(--portalThemeColor6); padding: 0.75rem; }
.modal-title { color: white; font-weight: 600; } 
.modal-body { padding: 0.75rem; color: var(--portalThemeColor8); }
.modal-footer { padding: 0.5rem 0.75rem; border-top: 1px solid var(--portalThemeColor6); }
/* Small modal adjustments */
.modal-sm { --bs-modal-width: 280px; }
/* Large modal adjustments */
.modal-lg { --bs-modal-width: 700px; }
.modal-body .alert { border-radius: 6px; margin-bottom: 1rem; }
.modal-content { background: var(--i3d-white-98); border: 1px solid var(--portalThemeColor6); }
.modal-header .btn-close { background: var(--i3d-white-20); border: 1px solid var(--i3d-white-30); border-radius: 6px; opacity: 1; filter: brightness(0) invert(1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } 
.modal-header .btn-close:hover { background: var(--i3d-white-30); opacity: 1; transform: scale(1.05); } 
/* Lookup Modal Styling */
.lookup-modal .modal-content { background: var(--i3d-white-98); border: 1px solid var(--portalThemeColor6); }  
.lookup-modal .modal-header { background: linear-gradient(135deg, var(--portalThemeColor4), var(--portalThemeColor2)); border-bottom: 1px solid var(--portalThemeColor6); color: white; padding: 16px 20px; }
.lookup-modal .modal-title { color: white; font-weight: 600; }
.lookup-modal .form-close { background: var(--i3d-white-20); border: 1px solid var(--i3d-white-30); border-radius: 4px; color: white; opacity: 1; }
.lookup-modal .form-close:hover { background: var(--i3d-white-30); } 
/* Lookup Modal Table */
.lookup-modal .entity-grid .table { background: white; }
.lookup-modal .entity-grid .table thead th { background: white !important; border-bottom: 1px solid var(--i3d-darkblue-10); color: var(--portalThemeColor8); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; }
.lookup-modal .entity-grid .table tbody tr:hover { background: var(--i3d-cyan-25); }
.lookup-modal .modal-footer .btn-default { background: var(--i3d-gray-10) !important; border: 1px solid var(--i3d-gray-30) !important; color: var(--portalThemeColor8) !important; } 
.lookup-modal .modal-footer .btn-default:hover { background: var(--i3d-gray-15) !important; } 
.lookup-modal .btn-default, .lookup-modal .btn-secondary { background: var(--i3d-gray-10) !important; border: 1px solid var(--i3d-gray-30) !important; color: var(--portalThemeColor8) !important; }  
.lookup-modal .btn-default:hover, .lookup-modal .btn-secondary:hover { background: var(--i3d-gray-15) !important; border-color: var(--i3d-gray-40) !important; }
.lookup-modal .remove-value { background: rgba(var(--bs-danger-rgb), 0.1); border-color: rgba(var(--bs-danger-rgb), 0.3); color: var(--bs-danger); }
.lookup-modal .remove-value:hover { background: rgba(var(--bs-danger-rgb), 0.15); } 
.lookup-modal .modal-header .form-close { background: var(--i3d-white-15) !important; border: 1px solid var(--i3d-white-30) !important; border-radius: 6px; color: var(--portalThemeColor7) !important; opacity: 1 !important; width: 32px; height: 32px; display: flex; align-items: flex-start; justify-content: center; transition: all 0.2s ease; padding: 0 !important; font-size: 26px; font-weight: 300; } 
.lookup-modal .modal-header .form-close:hover, .lookup-modal .modal-header .form-close:focus { background: var(--i3d-white-30) !important; border-color: var(--i3d-white-50) !important; color: var(--portalThemeColor7) !important; opacity: 1 !important; transform: scale(1.08); box-shadow: 0 2px 8px var(--i3d-black-15); } 
.lookup-modal .modal-header .form-close span[aria-hidden="true"] { display: block; line-height: 1; } 
/* Lookup Modal Search */
.lookup-modal .entitylist-search .form-control { background: var(--i3d-white-98); border: 1px solid var(--i3d-gray-30); border-radius: 8px 0 0 8px; } 
.lookup-modal .entitylist-search .btn { background: var(--i3d-cyan-25) !important; border: 1px solid var(--i3d-cyan-35) !important; border-left: none !important; border-radius: 0 8px 8px 0; color: var(--portalThemeColor1) !important; } 
.lookup-modal .entitylist-search .btn { border-left: none !important; border-radius: 0 8px 8px 0 !important; }
.lookup-modal .entitylist-search .btn:hover { background: var(--i3d-cyan-25) !important; color: var(--portalThemeColor4) !important; } 
/* Check Boxes */ 
span[role=checkbox].fa.fa-fw {
    display: block;
    border: 1px solid var(--portalThemeColor4);
    color: var(--portalThemeColor4);
    width: 20px;
    height: 20px;
}

span[role=checkbox] {
    border: 1px solid var(--portalThemeColor4);
    color: var(--portalThemeColor4);
    width: 20px;
    height: 20px;
}
/* ===== POWER PAGES FLUENT UI DETAILSLIST (Modern Lists) ===== */
/* Form inside Fluent UI Modal */
.ms-Dialog-main .crmEntityFormView { background: transparent; } 
.ms-Dialog-main { background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4)); border: 1px solid var(--portalThemeColor6); border-radius: 12px; box-shadow: 0 8px 32px var(--i3d-cyan-25); padding: 20px; }
/* Fluent UI Modal Header */
.ms-Dialog-main h2, .ms-Dialog-main #modalTitle { color: var(--portalThemeColor5); font-size: 1.5em; font-weight: 700; margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 2px solid var(--i3d-cyan-25); }
/* Fluent UI Modal Scrollable Content */
.ms-Modal-scrollableContent { max-height: 80vh; overflow-y: auto; }
/* Table Header - Colors and styling */
.ms-DetailsList-headerWrapper {
    top: 60px; /* MUST match CommandBar height */
    background: white;
}

/* Table Header - Visual styling */
.ms-DetailsHeader { 
    background: linear-gradient(135deg, var(--i3d-darkblue-05), var(--i3d-cyan-03)); 
    border-bottom: 2px solid var(--i3d-darkblue-10); 
    min-height: 50px;
    padding-top: 8px;

}

.ms-DetailsHeader-cell { 
    padding: 12px 8px; 
    transition: background 0.2s ease; 
} 

.ms-DetailsHeader-cell:hover { 
    background: var(--i3d-cyan-50); 
}  

.ms-DetailsHeader-cellName { 
    color: var(--portalThemeColor8); 
    font-size: 12px; 
    font-weight: 700; 
    letter-spacing: 0.5px; 
    text-transform: uppercase; 
}

/* Sort and Filter Icons */
.ms-DetailsHeader .sortIcon-204, 
.ms-DetailsHeader-filterChevron {
    color: var(--portalThemeColor1);
    opacity: 0.7;
}
/* ===== DETAILSLIST ROWS - OPTIMIZED SPACING ===== */
.ms-DetailsRow { border-bottom: 1px solid var(--i3d-darkblue-05); transition: background-color 0.2s ease; min-height: 42px; }
.ms-DetailsRow:hover { background: var(--i3d-cyan-25); } 
.ms-DetailsRow-cell .ms-Button--icon { background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4)) !important; border: 2px solid var(--portalThemeColor7) !important; border-radius: 50%; box-shadow: 0 2px 8px var(--i3d-cyan-25) !important; color: var(--portalThemeOnColor1) !important; transition: all 0.2s ease !important; width: 28px !important; height: 28px !important; min-width: 28px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }/* Hover state */
.ms-DetailsRow-cell .ms-Button--icon:hover { background: linear-gradient(135deg, var(--portalThemeColor9), var(--portalThemeColor4)) !important; transform: scale(1.05) !important; box-shadow: 0 4px 12px var(--i3d-cyan-35) !important; } 
.ms-DetailsRow-cell .ms-Button--icon:active { transform: scale(0.98) !important; box-shadow: 0 2px 6px var(--i3d-cyan-25) !important; }
.ms-DetailsRow-cell .ms-Button--icon:focus { outline: 2px solid var(--i3d-cyan-50) !important; outline-offset: 2px !important;}
.ms-DetailsRow-cell .ms-Button--icon .ms-Icon[data-icon-name="More"] { color: var(--portalThemeOnColor1) !important; font-size: 16px !important; line-height: 1 !important; }
.ms-DetailsRow-cell .ms-Button--icon .ms-Button-flexContainer { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; }
.ms-DetailsRow-cell { color: var(--portalThemeColor8); font-size: 14px; padding: 10px 5px; display: flex; align-items: center; }
.ms-DetailsRow-cell .ms-Link { color: var(--portalThemeColor1); font-weight: 600; transition: color 0.2s ease; }
.ms-DetailsRow-cell .ms-Link:hover { color: var(--portalThemeColor4); }
/* Table Enhancements */
thead th { background: linear-gradient(135deg, var(--i3d-darkblue-05), var(--i3d-cyan-03)) !important; border-bottom: 1px solid var(--i3d-darkblue-10); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; position: sticky; top: 0; }
tbody tr {border-bottom: 1px solid var(--i3d-darkblue-05); transition: background-color 0.2s ease; } 
.table { color: var(--portalThemeColor8); } 
.table-hover tbody tr:hover { background: var(--i3d-cyan-25); }
.table thead th { background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4)); border-bottom: 1px solid var(--portalThemeColor6); color: var(--portalThemeColor4); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; }


/* ===== UNIVERSAL CARD BASE ===== */
.i3d-card {
    background: white;
    border: 1px solid var(--i3d-cyan-25);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--i3d-cyan-10);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
}

.i3d-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--i3d-cyan-25);
    border-color: var(--i3d-cyan-35);
}

/* ===== CARD CONTENT ===== */
.i3d-card__body {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 12px;
    flex-grow: 1;
}

/* ===== CARD TYPOGRAPHY ===== */
.i3d-card__title {
    color: var(--portalThemeColor4);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.i3d-card__text {
    color: var(--portalThemeColor8);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.i3d-card__meta {
    font-size: 12px;
    color: var(--portalThemeColor8);
    font-weight: 500;
    opacity: 0.85;
    margin: 0;
}

.i3d-card__meta i {
    color: var(--portalThemeColor1);
    font-size: 13px;
    margin-right: 4px;
}

/* ===== CARD BUTTONS ===== */
.i3d-card__button {
    width: 100%;
    margin-top: auto;
}

/* ===== CARD ICON ===== */
.i3d-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--i3d-cyan-10), var(--i3d-cyan-25));
    border-radius: 50%;
    box-shadow: 0 4px 12px var(--i3d-cyan-25);
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin: 20px;
}

.i3d-card__icon i {
    color: var(--portalThemeColor1);
    font-size: 24px;
}

.i3d-card:hover .i3d-card__icon {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--i3d-cyan-25), var(--i3d-cyan-35));
}

/* When icon is part of horizontal layout, remove margin */
.d-flex .i3d-card__icon {
    margin: 0;
}

/* ===== CARD BADGE ===== */
.i3d-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--portalThemeColor1), var(--portalThemeColor4));
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px var(--i3d-cyan-25);
    z-index: 10;
}

.i3d-card__badge.bg-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.i3d-card__badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.i3d-card__badge.bg-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* ===== CARD FOOTER ===== */
.i3d-card__footer {
    padding: 16px 24px;
    background: var(--portalThemeColor5);
    border-top: 1px solid var(--i3d-cyan-10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--portalThemeColor8);
    margin-top: auto;
}

/* ===== GALLERY LAYOUTS ===== */
.i3d-gallery-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.i3d-gallery-title {
    color: var(--portalThemeColor4);
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
}

.i3d-gallery-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* All card galleries have proper spacing */
.i3d-card-gallery,
.i3d-facility-gallery,
.i3d-asset-gallery {
    padding: 12px;
}

/* Scrollable Gallery */
.i3d-gallery-scrollable {
    max-height: 640px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    margin: -12px; /* Negative margin to offset padding visually */
}

/* ===== CARD STATES ===== */
.i3d-card.active {
    border-color: var(--portalThemeColor1);
    box-shadow: 0 6px 20px var(--i3d-cyan-35);
    background: var(--i3d-cyan-03);
}

.i3d-card.inactive {
    opacity: 0.6;
}

.i3d-card.inactive .i3d-card__title {
    color: var(--portalThemeColor3);
}

/* ===== POWER PAGES SPACING RESETS ===== */
/* Remove default margins that interfere with card spacing */
.row.sectionBlockLayout .i3d-facility-gallery,
.row.sectionBlockLayout .i3d-asset-gallery {
    margin: 0 !important;
}

/* Ensure gallery headers don't inherit unwanted spacing */
.i3d-gallery-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Reset typography margins inside cards */
.i3d-card h1, .i3d-card h2, .i3d-card h3, 
.i3d-card h4, .i3d-card h5, .i3d-card h6 {
    margin-top: 0 !important;
}

.i3d-card p:first-child {
    margin-top: 0 !important;
}

.i3d-card p:last-child {
    margin-bottom: 0 !important;
}

/* ===== RESPONSIVE BASE ===== */
@media (max-width: 768px) {
    .i3d-gallery-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .i3d-gallery-filters {
        width: 100%;
    }
    
    .i3d-gallery-filters .form-control,
    .i3d-gallery-filters .form-select {
        max-width: 100% !important;
    }
    
    /* Reduce icon size on mobile */
    .i3d-card__icon {
        width: 48px;
        height: 48px;
        margin: 16px;
    }
    
    .i3d-card__icon i {
        font-size: 20px;
    }
    
    /* Make badges slightly smaller on mobile */
    .i3d-card__badge {
        font-size: 9px;
        padding: 5px 10px;
    }
}

/* Badge Enhancements */
.badge { font-weight: 600; font-size: 0.75rem; padding: 4px 8px; border-radius: 12px; } 
.badge.bg-primary { background: var(--i3d-cyan-25) ; color: var(--portalThemeColor1) ; border: 1px solid var(--i3d-cyan-35); }
.badge.bg-warning { background: rgba(var(--bs-warning-rgb), 0.1) ; color: var(--bs-warning) ; border: 1px solid rgba(var(--bs-warning-rgb), 0.3); }
.badge.bg-danger { background: rgba(var(--bs-danger-rgb), 0.1) ; color: var(--bs-danger) ; border: 1px solid rgba(var(--bs-danger-rgb), 0.3);}
.badge.bg-success { background: rgba(var(--bs-success-rgb), 0.1) ; color: var(--bs-success) ; border: 1px solid rgba(var(--bs-success-rgb), 0.3); }