:root,
html[data-theme="light"] {
color-scheme: light;
--bg: #ffffff;
--card: #ffffff;
--card-strong: #ffffff;
--text: #0f172a;
--muted: #64748b;
--accent: #0f172a;
--accent-2: #334155;
--accent-light: rgba(37, 99, 235, 0.08);
--navy: #0f172a;
--navy-muted: #64748b;
--border: #e8ecf1;
--glass-border: #e8ecf1;
--shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 20px rgba(15, 23, 42, 0.06);
--shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
--surface: #ffffff;
--badge-bg: #eef2f6;
--badge-text: var(--accent);
--ui-primary: #2563eb;
--ui-primary-hover: #1d4ed8;
--font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--radius: 8px;
--admin-sidebar-width: 244px;
--admin-sidebar-collapsed-width: 72px;
--admin-sidebar-bg: #e8f4fc;
--admin-sidebar-bg-top: #dceefb;
--admin-sidebar-border: #b6d4f0;
--admin-sidebar-text: #1e3a5f;
--admin-sidebar-muted: #4a6b8a;
--admin-sidebar-group-color: #5b7a9a;
--admin-sidebar-summary-chevron: #6b8aab;
--admin-sidebar-accent: #2563eb;
--admin-sidebar-active: rgba(37, 99, 235, 0.12);
--admin-sidebar-active-text: #1d4ed8;
--admin-sidebar-hover: rgba(37, 99, 235, 0.1);
--admin-sidebar-active-border: #1d4ed8;
--admin-sidebar-nav-shadow: 2px 0 16px rgba(37, 99, 235, 0.08);
--admin-sidebar-user-bg: rgba(255, 255, 255, 0.7);
--admin-sidebar-user-strong: #1e3a5f;
--admin-sidebar-user-avatar-bg: #2563eb;
--admin-sidebar-user-avatar-fg: #ffffff;
--admin-sidebar-chevron: #6b8aab;
--admin-sidebar-icon: #1e3a5f;
--admin-sidebar-icon-bg: rgba(30, 58, 95, 0.1);
--admin-chrome-hover: rgba(15, 23, 42, 0.07);
--admin-chrome-active: rgba(37, 99, 235, 0.12);
--preheader-bg: #f4f7fa;
--preheader-border: #e8ecf1;
--preheader-text: #334155;
--preheader-muted: #64748b;
--preheader-link: #1d4ed8;
--preheader-chip-bg: #ffffff;
--preheader-chip-border: #e8ecf1;
--preheader-chip-text: #0f172a;
--admin-main-inset: 12px;
--admin-preheader-height: 0px;
--admin-header-height: 40px;
--page-bg: #ffffff;
--table-header-bg: #f8fafc;
--table-row-hover: rgba(15, 23, 42, 0.04);
--empty-state-bg: #f8fafc;
--banner-warn-bg: #fffbeb;
--banner-warn-border: #fcd34d;
--banner-warn-icon-bg: #fef3c7;
--banner-warn-title: #92400e;
--banner-warn-text: #a16207;
--banner-warn-code-bg: #fef3c7;
--link-hover: #2563eb;
--table-stripe-bg: rgba(15, 23, 42, 0.025);
--table-zebra-bg: #f6f8fb;
--kbd-bg: #f1f5f9;
--fs-base: 13px;
--fs-sm: 12px;
--fs-xs: 11px;
--fs-lg: 14px;
--fs-xl: 16px;
--fs-2xl: 19px;
--fs-page-title: 19px;
--fs-display: 24px;
--lh: 1.55;
--lh-tight: 1.35;
--focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
html[data-theme="dark"] {
color-scheme: dark;
--bg: #000000;
--card: #141414;
--card-strong: #171717;
--text: #fafafa;
--muted: #a3a3a3;
--accent: #e5e5e5;
--accent-2: #d4d4d4;
--accent-light: rgba(255, 255, 255, 0.06);
--border: #2a2a2a;
--glass-border: #333333;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
--surface: #141414;
--badge-bg: var(--card-strong);
--badge-text: var(--muted);
--ui-primary: #3b82f6;
--ui-primary-hover: #60a5fa;
--admin-sidebar-width: 244px;
--admin-sidebar-collapsed-width: 72px;
--admin-sidebar-bg: #0f1f35;
--admin-sidebar-bg-top: #0c1a2e;
--admin-sidebar-border: rgba(255, 255, 255, 0.08);
--admin-sidebar-text: #e8f2ff;
--admin-sidebar-muted: rgba(186, 210, 240, 0.75);
--admin-sidebar-group-color: rgba(147, 180, 220, 0.65);
--admin-sidebar-summary-chevron: rgba(147, 180, 220, 0.55);
--admin-sidebar-accent: #60a5fa;
--admin-sidebar-active: #2563eb;
--admin-sidebar-active-text: #ffffff;
--admin-sidebar-hover: rgba(59, 130, 246, 0.18);
--admin-sidebar-active-border: #60a5fa;
--admin-sidebar-nav-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
--admin-sidebar-user-bg: rgba(0, 0, 0, 0.28);
--admin-sidebar-user-strong: #f9fafb;
--admin-sidebar-user-avatar-bg: #2563eb;
--admin-sidebar-user-avatar-fg: #ffffff;
--admin-sidebar-chevron: rgba(255, 255, 255, 0.5);
--admin-sidebar-icon: #93c5fd;
--admin-sidebar-icon-bg: rgba(59, 130, 246, 0.2);
--admin-chrome-hover: rgba(255, 255, 255, 0.08);
--admin-chrome-active: rgba(59, 130, 246, 0.22);
--table-header-bg: #262626;
--table-header-text: #e5e5e5;
--table-row-hover: rgba(255, 255, 255, 0.04);
--empty-state-bg: #171717;
--banner-warn-bg: rgba(234, 179, 8, 0.12);
--banner-warn-border: rgba(202, 138, 4, 0.45);
--banner-warn-icon-bg: rgba(234, 179, 8, 0.18);
--banner-warn-title: #fde68a;
--banner-warn-text: #d4d4d4;
--banner-warn-code-bg: rgba(234, 179, 8, 0.15);
--link-hover: #93c5fd;
--table-stripe-bg: rgba(255, 255, 255, 0.04);
--table-zebra-bg: #181818;
--kbd-bg: #262626;
--preheader-bg: #0a0a0a;
--preheader-border: #2a2a2a;
--preheader-text: #e5e5e5;
--preheader-muted: #a3a3a3;
--preheader-link: #93c5fd;
--preheader-chip-bg: #171717;
--preheader-chip-border: #404040;
--preheader-chip-text: #fafafa;
--page-bg: #000000;
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.28);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font);
font-size: var(--fs-base);
line-height: var(--lh);
background: var(--bg);
color: var(--text);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body.admin-app {
background: var(--page-bg);
}
.preheader {
background: var(--preheader-bg);
border-bottom: 1px solid var(--preheader-border);
color: var(--preheader-text);
font-size: 11px;
margin: 0;
padding: 0;
}
.preheader-trial {
background: #0b3d2e;
border-bottom: 1px solid rgba(16, 185, 129, 0.35);
min-height: 40px;
font-size: 12px;
color: #ffffff;
}
.preheader-trial .preheader-shell { padding: 0 18px; min-height: 40px; }
.preheader-trial .pre-meta { color: #ffffff; font-weight: 600; }
.preheader-trial .pre-trial-date { font-weight: 500; margin-left: auto; color: #d1fae5; }
.preheader-trial .pre-chip { background: rgba(16, 185, 129, 0.28); border-color: rgba(110, 231, 183, 0.55); color: #ecfdf5; }
.preheader-shell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: var(--admin-preheader-height);
flex-wrap: nowrap;
}
.pre-left,
.pre-right {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
}
.pre-chip {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid var(--preheader-chip-border);
background: var(--preheader-chip-bg);
color: var(--preheader-chip-text);
font-weight: 600;
letter-spacing: .01em;
line-height: 1.2;
}
.pre-meta {
color: var(--preheader-muted);
font-weight: 500;
line-height: 1.2;
}
.pre-link {
color: var(--preheader-link);
text-decoration: none;
font-weight: 600;
line-height: 1.2;
}
.pre-link:hover { text-decoration: underline; }
.pre-view-form {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pre-view-label {
display: inline-flex;
align-items: center;
margin: 0;
color: var(--preheader-muted);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.pre-view-select {
width: auto;
min-width: 194px;
height: 30px;
padding: 0 34px 0 12px;
border-radius: 10px;
border: 1px solid var(--preheader-chip-border);
background: var(--preheader-chip-bg);
color: var(--preheader-chip-text);
font-size: 12px;
font-weight: 500;
}
.preheader > .header-shell.preheader-shell {
padding-top: 3px;
padding-bottom: 3px;
}
.public-preheader .preheader-shell { padding: 0 24px; max-width: 1280px; margin: 0 auto; }
.public-header .header-shell { padding: 12px 24px; }
header {
background: rgba(255, 255, 255, 0.72);
border-bottom: none;
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
margin: 0;
}
[data-theme="dark"] header {
background: rgba(10, 10, 10, 0.9);
border-bottom-color: var(--border);
}
/* Admin: bar must stay above the fixed sidebar so it never hides Show menu / logo */
header.admin-header {
z-index: 100;
position: relative;
}
.header-shell { width: 100%; padding: 14px 24px; box-sizing: border-box; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
/* Longhands so admin `padding-left` overrides don’t drop the horizontal gutter */
.container-full {
max-width: none;
width: 100%;
margin: 0;
box-sizing: border-box;
padding-top: 8px;
padding-bottom: 16px;
padding-right: 20px;
padding-left: 20px;
}
.login-main { max-width: none; padding: 0; }
nav { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.brand-mark {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
border: 1px solid var(--border);
flex-shrink: 0;
overflow: hidden;
}
.brand-logo {
height: 42px;
width: auto;
max-width: 220px;
object-fit: contain;
object-position: left center;
display: block;
border: none;
background: transparent;
padding: 0;
}
.brand-wordmark {
display: inline-grid;
gap: 3px;
line-height: 1;
}
.brand-wordmark strong {
font-size: 15px;
color: var(--text);
letter-spacing: -.01em;
}
.brand-wordmark small {
font-size: 11px;
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
}
.nav-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.nav-links a {
color: var(--text);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--radius);
border: 1px solid transparent;
background: transparent;
transition: background .15s ease, border-color .15s ease, color .15s ease;
font-size: 13px;
white-space: nowrap;
}
.nav-links a:hover {
color: var(--text);
border-color: transparent;
background: var(--accent-light);
text-decoration: none;
}
.nav-links a.active {
color: var(--text);
border-color: transparent;
background: transparent;
font-weight: 600;
box-shadow: none;
border-bottom: 3px solid #0071e3;
border-radius: 0;
padding-bottom: 7px;
margin-bottom: -1px;
}
.admin-nav-left { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; z-index: 100; position: relative; min-width: 0; }
.admin-nav-left .brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.admin-nav-left .nav-toggle { flex-shrink: 0; }
.admin-nav-left .brand-logo {
height: 52px;
width: auto;
max-width: 240px;
display: block;
flex-shrink: 0;
}
.nav-toggle {
border: none;
background: transparent;
border-radius: 0;
padding: 0;
width: 30px;
height: 30px;
font-size: 0;
line-height: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav-toggle:hover { background: transparent; color: var(--text); }
.nav-toggle-icon {
display: block;
pointer-events: none;
}
.nav-toggle-icon svg {
display: block;
width: 20px;
height: 20px;
}
/* Sidebar closed: primary links + "More" dropdown in the top bar (not every link inline). */
body:not(.admin-nav-open) .admin-header .nav-links {
display: flex;
flex: 1;
min-width: 0;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
body:not(.admin-nav-open) .admin-header .nav-links a.active {
box-shadow: none;
}
.admin-header .nav-more-wrap {
position: relative;
}
.admin-header .nav-more-btn {
color: var(--text);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-radius: var(--radius);
border: 1px solid transparent;
background: transparent;
transition: background .15s ease, border-color .15s ease, color .15s ease;
font-size: 13px;
white-space: nowrap;
font-family: inherit;
cursor: pointer;
line-height: 1.2;
}
.admin-header .nav-more-btn:hover {
color: var(--text);
border-color: transparent;
background: var(--accent-light);
}
.admin-header .nav-more-btn.active {
color: var(--text);
border-color: rgba(0, 0, 0, 0.08);
background: var(--accent-light);
font-weight: 600;
}
.admin-header .nav-more-btn .nav-more-chevron {
width: 14px;
height: 14px;
opacity: 0.7;
}
body:not(.admin-nav-open) .admin-header .nav-more-panel {
display: none;
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 600px;
max-height: min(70vh, 520px);
overflow-y: auto;
background: #fff;
border: none;
border-radius: 0;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
padding: 16px 20px;
z-index: 60;
flex-direction: row;
gap: 24px;
box-sizing: border-box;
}
body:not(.admin-nav-open) .admin-header .nav-more-wrap.is-open .nav-more-panel {
display: flex;
}
body:not(.admin-nav-open) .admin-header .nav-more-panel a {
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
}
body.admin-nav-open .admin-header .nav-more-btn {
display: none;
}
body.admin-nav-open .admin-header .nav-more-wrap {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
body.admin-nav-open .admin-header .nav-more-panel {
display: flex !important;
flex-direction: column;
align-items: stretch;
width: 100%;
position: static;
min-width: 0;
max-height: none;
overflow: visible;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
gap: 2px;
}
body.admin-nav-open .admin-header .nav-more-panel a {
width: 100%;
box-sizing: border-box;
}
body.admin-nav-open:not(.agency-manning-app) .admin-header .nav-links {
display: flex !important;
flex-direction: column;
justify-content: flex-start;
position: fixed;
top: var(--admin-header-height);
left: 0;
width: var(--admin-sidebar-width);
height: calc(100vh - var(--admin-header-height));
background: var(--admin-sidebar-bg);
border-right: 1px solid var(--admin-sidebar-border);
padding: 0;
gap: 0;
align-items: stretch;
overflow-y: auto;
overflow-x: hidden;
z-index: 50;
box-shadow: var(--admin-sidebar-nav-shadow);
scrollbar-width: thin;
}
body.admin-nav-open .admin-header .nav-links a {
justify-content: flex-start;
padding: 0;
border-radius: 0;
}
body.admin-nav-open .admin-header .nav-more-panel a {
border-radius: 0;
}
/* Sidebar offset - matches sidebar width exactly */
body.admin-nav-open:not(.agency-manning-app) main.container-full {
padding-left: var(--admin-sidebar-width);
}
body.admin-nav-open:not(.agency-manning-app) main.container:not(.container-full) {
padding-left: var(--admin-sidebar-width);
}
body.admin-nav-open .preheader {
padding-left: 0;
}
body.admin-nav-open header.admin-header {
padding-left: 0;
}
@media (min-width: 1024px) {
body.admin-nav-open:not(.agency-manning-app) .admin-header .nav-links {
justify-content: flex-start;
}
}
body.admin-nav-closed header.admin-header {
padding-left: 0 !important;
}
body.admin-nav-closed .preheader {
padding-left: 0 !important;
}
/* Expanded admin rail (iShip-style): dark column, grouped nav */
body.admin-nav-open:not(.agency-manning-app) header.admin-header {
padding-left: 0 !important;
background: #ffffff;
border-bottom: 1px solid var(--border);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.admin-nav-open header.admin-header .header-shell {
padding: 0 24px;
min-height: var(--admin-header-height);
}
/* Admin/agency only: topbar mode hides the open-skin rail. Crew reuses
.admin-nav-skin-open on .crew-dash-sidebar and must stay visible. */
body:not(.admin-nav-open):not(.crew-app) .admin-nav-skin-open {
display: none !important;
}
body.admin-nav-open .admin-nav-skin-closed {
display: none !important;
}
body:not(.admin-nav-open) .admin-header .nav-links {
position: static;
width: auto;
height: auto;
background: transparent;
border: none;
padding: 0;
flex: 1;
min-width: 0;
}
body:not(.admin-nav-open) .admin-nav-skin-closed {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 1;
}
body.admin-nav-open .admin-header .nav-links a {
display: flex;
align-items: center;
color: var(--admin-sidebar-text);
border: none;
border-radius: 0;
font-weight: 500;
padding: 9px 12px;
margin: 0;
width: 100%;
max-width: none;
box-sizing: border-box;
}
body.admin-nav-open .admin-header .nav-links a .icon {
opacity: 0.92;
}
body.admin-nav-open .admin-header .nav-links a.active .icon {
color: var(--admin-sidebar-active-text, var(--admin-sidebar-text));
opacity: 1;
}
body.admin-nav-open .admin-header .nav-links a:hover {
background: var(--admin-sidebar-hover);
color: var(--admin-sidebar-text);
}
body.admin-nav-open .admin-header .nav-links a.active {
background: var(--admin-sidebar-active);
color: var(--admin-sidebar-active-text, var(--admin-sidebar-text));
font-weight: 600;
box-shadow: none;
border-left: 3px solid var(--admin-sidebar-active-border);
padding-left: 9px;
padding-right: 12px;
}
.admin-nav-skin-open {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
height: 100%;
}
.admin-nav-skin-scroll {
flex: 1;
overflow-x: hidden;
overflow-y: auto;
min-height: 0;
padding: 8px 0 0;
display: flex;
flex-direction: column;
scrollbar-width: thin;
}
.admin-sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 0 14px;
border-bottom: 1px solid var(--admin-sidebar-border);
flex-shrink: 0;
}
.admin-sidebar-brand .brand {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
text-decoration: none;
}
.admin-sidebar-brand .brand-wordmark {
font-size: 16px;
font-weight: 700;
color: var(--admin-sidebar-text);
letter-spacing: -0.02em;
}
.admin-sidebar-brand .brand-logo {
height: 48px;
width: auto;
max-width: 200px;
object-fit: contain;
object-position: left center;
display: block;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.admin-nav-section-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--admin-sidebar-muted);
padding: 20px 20px 8px;
text-transform: uppercase;
}
.admin-nav-details {
margin: 0;
overflow: hidden;
}
.admin-nav-details summary {
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
cursor: pointer;
min-height: 40px;
padding: 0 20px;
font-size: 12px;
line-height: 1.2;
font-weight: 500;
color: var(--admin-sidebar-text);
user-select: none;
background: transparent;
border: none;
}
.admin-nav-details summary::-webkit-details-marker {
display: none;
}
.admin-nav-details summary::after {
content: "";
width: 6px;
height: 6px;
border-right: 1.5px solid var(--admin-sidebar-summary-chevron, var(--admin-sidebar-muted));
border-bottom: 1.5px solid var(--admin-sidebar-summary-chevron, var(--admin-sidebar-muted));
transform: rotate(45deg);
flex-shrink: 0;
margin-left: auto;
}
.admin-nav-details[open] summary::after {
transform: rotate(225deg);
}
.admin-nav-details .admin-nav-sub {
display: flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 20px 0 44px;
font-size: 12px;
line-height: 1.2;
font-weight: 400;
margin: 0;
width: 100%;
box-sizing: border-box;
color: var(--admin-sidebar-muted);
}
.admin-nav-leaf {
display: flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 20px;
font-size: 12px;
line-height: 1.2;
font-weight: 500;
color: var(--admin-sidebar-text);
text-decoration: none;
}
body.admin-nav-open .admin-header .nav-links .admin-nav-details .admin-nav-sub.active {
background: var(--admin-sidebar-active);
box-shadow: none;
font-weight: 600;
color: #ffffff;
}
.admin-nav-audit-alerts-group {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 6px;
}
body:not(.admin-nav-open) .admin-nav-skin-closed .admin-nav-audit-alerts-group {
flex-basis: 100%;
width: 100%;
}
body:not(.admin-nav-open) .admin-nav-skin-closed .admin-nav-audit-alerts-group a {
width: 100%;
box-sizing: border-box;
}
body.admin-nav-open .admin-header .nav-links .admin-nav-audit-alerts-group a {
display: flex;
width: 100%;
box-sizing: border-box;
}
.admin-nav-section-spacer {
height: 0;
margin: 10px 10px 16px;
border-bottom: 1px solid var(--admin-sidebar-border);
}
body.admin-nav-open .admin-header .nav-links a.admin-nav-leaf {
position: relative;
padding-right: 18px;
min-height: 34px;
margin: 0 6px 3px;
border-radius: 6px;
}
body.admin-nav-open .admin-header .nav-links a.admin-nav-leaf::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
width: 6px;
height: 6px;
margin-top: -3px;
border-right: 2px solid var(--admin-sidebar-chevron);
border-bottom: 2px solid var(--admin-sidebar-chevron);
transform: rotate(-45deg);
opacity: 0.65;
pointer-events: none;
}
.admin-nav-details .admin-nav-sub + .admin-nav-sub {
margin-top: 6px;
}
.admin-sidebar-footer {
flex-shrink: 0;
margin-top: auto;
padding: 10px 8px 0;
border-top: 1px solid var(--admin-sidebar-border);
}
.admin-sidebar-footer-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 8px;
color: var(--admin-sidebar-muted);
text-decoration: none;
font-size: var(--fs-sm, 13px);
transition: background 0.15s, color 0.15s;
}
.admin-sidebar-footer-link:hover {
background: var(--admin-sidebar-hover);
color: var(--admin-sidebar-text);
}
.admin-sidebar-footer-link .icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.admin-sidebar-user {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 8px;
background: var(--admin-sidebar-user-bg);
}
.admin-sidebar-user-avatar {
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--admin-sidebar-user-avatar-bg);
color: var(--admin-sidebar-user-avatar-fg);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--admin-sidebar-border);
}
.admin-sidebar-user-text {
min-width: 0;
flex: 1;
}
.admin-sidebar-user-text strong {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--admin-sidebar-user-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-sidebar-user-text span {
display: block;
margin-top: 1px;
font-size: 11px;
color: var(--admin-sidebar-muted);
font-weight: 600;
line-height: 1.25;
}
[data-theme="dark"] .admin-sidebar-user-text span {
color: var(--admin-sidebar-muted);
}
body.admin-nav-open .admin-header .nav-links .admin-sidebar-footer a {
margin-top: 6px;
}
.admin-header {
background: #ffffff;
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
[data-theme="dark"] .admin-header {
background: #0a0a0a;
}
body.admin-nav-open header.admin-header {
background: #ffffff !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
[data-theme="dark"].admin-nav-open header.admin-header {
background: #0a0a0a !important;
border-bottom: 1px solid var(--border) !important;
}
[data-theme="dark"].admin-nav-open .admin-header .nav-links a.active,
[data-theme="dark"].admin-nav-open .admin-header .nav-links .admin-nav-details .admin-nav-sub.active {
color: #f8fafc;
}
[data-theme="dark"].admin-nav-open .admin-header .nav-links a.active .icon {
color: #ffffff;
}
[data-theme="dark"] .admin-topbar-link,
[data-theme="dark"] .admin-topbar-trigger {
color: var(--admin-sidebar-muted);
}
[data-theme="dark"] .admin-topbar-link:hover,
[data-theme="dark"] .admin-topbar-trigger:hover {
background: var(--admin-chrome-hover);
color: var(--text);
}
[data-theme="dark"] .admin-topbar-link.active,
[data-theme="dark"] .admin-topbar-trigger.active {
background: var(--admin-chrome-active);
color: var(--ui-primary-hover);
}
body.admin-nav-open .admin-nav-left {
display: inline-flex;
}
body.admin-nav-open header.admin-header .header-shell {
padding: 0 24px;
min-height: 56px;
}
body:not(.admin-nav-open) .admin-header .nav-links {
display: none !important;
}
.admin-header nav {
gap: 18px;
overflow: visible;
display: flex;
align-items: center;
}
body.admin-nav-open .admin-header nav {
justify-content: space-between;
min-height: 56px;
}
/* (sidebar layout rules moved to end-of-file block) */
.admin-topbar-menu {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
min-width: 0;
overflow: visible;
scrollbar-width: none;
justify-content: flex-start;
padding: 0 16px;
}
.admin-topbar-menu::-webkit-scrollbar {
display: none;
}
.admin-topbar-link {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 14px;
background: transparent;
color: var(--muted);
text-decoration: none;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
font-family: inherit;
cursor: pointer;
border-radius: 8px;
border: none;
position: relative;
}
.admin-topbar-link:hover {
background: var(--admin-chrome-hover);
color: var(--text);
}
.admin-topbar-link.active {
background: var(--admin-chrome-active);
color: var(--ui-primary);
}
.admin-topbar-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 2px;
background: #3b82f6;
border-radius: 2px 2px 0 0;
}
.admin-topbar-dropdown {
position: relative;
flex: 0 0 auto;
}
.admin-topbar-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 14px;
background: transparent;
color: var(--muted);
text-decoration: none;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
font-family: inherit;
cursor: pointer;
border-radius: 8px;
border: none;
}
.admin-topbar-trigger:hover {
background: var(--admin-chrome-hover);
color: var(--text);
}
.admin-topbar-trigger.active {
background: var(--admin-chrome-active);
color: var(--ui-primary);
}
.admin-topbar-chevron {
width: 14px;
height: 14px;
opacity: .7;
}
.admin-topbar-panel {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
padding: 12px 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
z-index: 70;
}
.admin-topbar-dropdown.is-open .admin-topbar-panel {
display: grid;
gap: 4px;
}
.admin-topbar-panel a {
display: block;
padding: 10px 12px;
color: var(--text);
text-decoration: none;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
}
.admin-topbar-panel a:hover {
background: var(--admin-chrome-hover);
color: var(--text);
}
.admin-topbar-panel a.active {
background: var(--admin-chrome-active);
color: var(--ui-primary);
}
.admin-header-tools {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.admin-header-profile {
min-height: 36px;
height: auto;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 4px 10px 4px 4px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
max-width: 280px;
}
.admin-header-profile:hover {
background: var(--accent-light);
border-color: var(--glass-border);
}
.admin-header-profile-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: #2563eb;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.admin-header-profile-text {
display: grid;
gap: 1px;
min-width: 0;
text-align: left;
line-height: 1.25;
}
.admin-header-profile-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-header-profile-meta {
font-size: 11px;
font-weight: 500;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-header-identity {
display: none;
align-items: center;
gap: 10px;
min-width: 0;
padding: 0 4px;
}
.admin-header-identity-text {
display: grid;
gap: 2px;
min-width: 0;
line-height: 1.25;
}
.admin-header-identity-name {
font-size: 13px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-header-identity-line {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-header-identity-role {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
flex-shrink: 0;
}
[data-theme="dark"] .admin-header-identity-role {
background: rgba(59, 130, 246, 0.18);
color: #93c5fd;
}
@media (min-width: 900px) {
.admin-header-identity {
display: inline-flex;
}
.admin-header-profile-text {
display: none;
}
.admin-header-profile {
padding: 4px;
border: none;
background: transparent;
max-width: none;
}
.admin-header-profile:hover {
background: var(--accent-light);
}
}
@media (max-width: 899px) {
.admin-header-profile-text {
display: grid;
}
}
.admin-profile-wrap {
position: relative;
flex: 0 0 auto;
}
.admin-profile-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 140px;
padding: 6px;
border-radius: 10px;
background: #1e293b;
border: 1px solid #334155;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
z-index: 70;
}
.admin-profile-wrap.is-open .admin-profile-menu {
display: block;
}
.admin-profile-menu a {
display: flex;
align-items: center;
min-height: 36px;
padding: 8px 10px;
border-radius: 8px;
color: var(--text);
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.admin-profile-menu a:hover {
background: var(--admin-chrome-hover);
color: var(--text);
}
.admin-profile-menu a[href*="logout"] {
color: #dc2626;
font-weight: 600;
}
.admin-profile-menu a[href*="logout"]:hover {
background: #fef2f2;
color: #b91c1c;
}
[data-theme="dark"] .admin-profile-menu a[href*="logout"] {
color: #f87171;
}
[data-theme="dark"] .admin-profile-menu a[href*="logout"]:hover {
background: rgba(239, 68, 68, 0.14);
color: #fca5a5;
}
/* (sidebar/topbar toggle rules moved to end-of-file block) */
.admin-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.18);
z-index: 35;
}
.public-header .nav-links .btn-demo {
background: #0071e3;
color: #fff;
border: none;
border-radius: var(--radius);
}
.public-header .nav-links .btn-demo:hover {
background: #0077ed;
border-color: transparent;
}
.icon { width: 16px; height: 16px; }
.admin-nav-leaf .icon,
.admin-nav-sub .icon {
width: 16px;
height: 16px;
flex-shrink: 0;
display: block;
opacity: 0.7;
}
@media (max-width: 900px) {
.preheader-shell {
min-height: auto;
flex-wrap: wrap;
padding-top: 8px;
padding-bottom: 8px;
}
.pre-left,
.pre-right {
flex-wrap: wrap;
}
.header-shell { padding: 12px; }
nav {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.admin-header nav {
flex-wrap: wrap;
align-items: flex-start;
}
.admin-topbar-menu {
order: 3;
flex-basis: 100%;
padding-top: 4px;
flex-wrap: wrap;
overflow: visible;
}
.admin-header-tools {
margin-left: auto;
}
.nav-links {
width: 100%;
justify-content: flex-start;
}
.brand-wordmark small { display: none; }
}
@media (max-width: 760px) {
body.admin-nav-open .admin-header .nav-links {
top: var(--admin-header-height);
height: calc(100vh - var(--admin-header-height));
width: var(--admin-sidebar-width);
}
.admin-topbar-menu {
gap: 6px;
}
.admin-topbar-link,
.admin-topbar-trigger {
min-height: 34px;
padding: 0 10px;
font-size: 12px;
}
}
@media (max-width: 1024px) {
body.admin-nav-open .admin-overlay {
display: block;
}
}
.card,
.panel,
.section-panel {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 24px;
margin-bottom: 20px;
box-shadow: var(--shadow-soft);
}
.grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, select, textarea {
width: 100%;
padding: 10px 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 14px;
background: var(--card-strong);
}
/* Native checkboxes/radios must not inherit full-width text-input rules (breaks flex rows). */
input[type="checkbox"],
input[type="radio"] {
width: auto;
max-width: none;
padding: 0;
border: none;
background: transparent;
vertical-align: middle;
}
button {
background: var(--ui-primary);
color: #fff;
border: none;
padding: 10px 18px;
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
font-family: var(--font);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
button.secondary {
background: var(--card);
color: var(--text);
border: 1px solid var(--border);
box-shadow: none;
}
button:hover {
opacity: 0.96;
filter: brightness(1.03);
}
/* Defensive normalization for "close" / icon-only buttons across the entire app.
The global `button { color:#fff }` rule above used to render the × text invisible
on any modal-close button that set a white/transparent background but forgot to
override color (e.g. .trn-modal-close, .doc-modal-close, .vc-modal-close, etc.).
This single rule keeps every close button readable regardless of which page or
module owns the styling.
Specificity is 0,0,1,1 — high enough to beat the bare `button` rule but low
enough that any page-specific class with multiple selectors (e.g. drm-modal-close
.drm-btn.drm-btn-ghost on a Cancel button) still wins. No !important so we never
clobber legitimate per-page styling. */
button[aria-label*="Close" i],
button[class*="modal-close"],
button[class*="drawer-close"],
button[class*="-close-x"],
button.close-btn,
button.close-x,
button.bpd-close {
background: transparent;
color: #475569;
border: 0;
box-shadow: none;
font-size: 22px;
line-height: 1;
padding: 4px 10px;
border-radius: 8px;
font-weight: 500;
}
button[aria-label*="Close" i]:hover,
button[class*="modal-close"]:hover,
button[class*="drawer-close"]:hover,
button[class*="-close-x"]:hover,
button.close-btn:hover,
button.close-x:hover,
button.bpd-close:hover {
background: #f1f5f9;
color: #0f172a;
opacity: 1;
filter: none;
}
.muted { color: var(--muted); }
.badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
background: var(--badge-bg, #eef2f6);
color: var(--badge-text, var(--accent));
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.flash { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 12px; border: 1px solid transparent; }
.flash.error { background: #ffe5e5; color: #7a0000; }
.flash.success { background: #e6f4ea; color: #0b5d1e; }
.flash.info { background: #e8f0fe; color: #1a3a5c; }
.vdoc-warning-modal {
position: fixed;
inset: 0;
z-index: 100120;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(15, 23, 42, 0.58);
backdrop-filter: blur(2px);
}
.vdoc-warning-modal.is-open { display: flex; }
.vdoc-warning-card {
width: min(520px, 100%);
max-height: min(86vh, 640px);
display: flex;
flex-direction: column;
background: #fff;
color: var(--text);
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
overflow: hidden;
}
.vdoc-warning-head {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid #f1f5f9;
background: #fffbeb;
flex-shrink: 0;
}
.vdoc-warning-icon {
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(245, 158, 11, 0.18);
color: #b45309;
flex-shrink: 0;
}
.vdoc-warning-icon svg {
width: 16px;
height: 16px;
}
.vdoc-warning-copy {
flex: 1;
min-width: 0;
}
.vdoc-warning-copy h3 {
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: #92400e;
}
.vdoc-warning-copy p {
margin: 3px 0 0;
color: #78716c;
font-size: 12px;
line-height: 1.4;
}
.vdoc-warning-close {
margin-left: auto;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid #e7e5e4;
background: #fff;
color: #78716c;
cursor: pointer;
flex-shrink: 0;
font-size: 18px;
line-height: 1;
}
.vdoc-warning-close:hover {
color: #1c1917;
border-color: #d6d3d1;
}
.vdoc-warning-body {
padding: 10px 12px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
background: #fff;
}
.vdoc-warning-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.vdoc-warning-item {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #fde68a;
background: #fffbeb;
}
.vdoc-warning-item strong {
display: block;
margin-bottom: 2px;
font-size: 12px;
font-weight: 700;
color: #1c1917;
line-height: 1.3;
}
.vdoc-warning-item span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 11px;
color: #78716c;
line-height: 1.35;
}
.vdoc-warning-hint {
margin: 8px 0 0;
color: var(--muted);
font-size: 11px;
}
.vdoc-warning-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid #f1f5f9;
background: #fafaf9;
flex-shrink: 0;
}
.vdoc-warning-ack {
min-height: 34px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid #d6d3d1;
background: #1c1917;
color: #fff;
font-weight: 600;
font-size: 12px;
cursor: pointer;
}
.vdoc-warning-ack:hover {
background: #000;
border-color: #000;
}
html[data-theme="dark"] .vdoc-warning-modal {
background: rgba(0, 0, 0, 0.72);
}
html[data-theme="dark"] .vdoc-warning-card {
background: var(--card);
border-color: var(--border);
}
html[data-theme="dark"] .vdoc-warning-head {
background: rgba(245, 158, 11, 0.12);
border-bottom-color: var(--border);
}
html[data-theme="dark"] .vdoc-warning-copy h3 {
color: #fcd34d;
}
html[data-theme="dark"] .vdoc-warning-copy p,
html[data-theme="dark"] .vdoc-warning-item span {
color: var(--muted);
}
html[data-theme="dark"] .vdoc-warning-icon {
background: rgba(245, 158, 11, 0.2);
color: #fcd34d;
}
html[data-theme="dark"] .vdoc-warning-item {
background: rgba(15, 23, 42, 0.55);
border-color: rgba(245, 158, 11, 0.24);
}
html[data-theme="dark"] .vdoc-warning-item strong {
color: var(--text);
}
html[data-theme="dark"] .vdoc-warning-body,
html[data-theme="dark"] .vdoc-warning-foot {
background: var(--card);
border-color: var(--border);
}
html[data-theme="dark"] .vdoc-warning-ack {
background: var(--ui-primary);
border-color: var(--ui-primary);
color: #fff;
}
html[data-theme="dark"] .vdoc-warning-close {
background: var(--card);
border-color: var(--border);
color: var(--muted);
}
.section-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 14px;
}
.section-title h2,
.section-title h3 { margin: 0; }
.panel + .panel { margin-top: 20px; }
.dashboard-grid { display: grid; gap: 20px; }
@media (min-width: 980px) { .dashboard-grid { grid-template-columns: 1.1fr 0.9fr; } }
.stat-row { display: grid; gap: 12px; }
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
padding: 14px 16px;
border-radius: var(--radius);
background: #ffffff;
border: 1px solid var(--border);
box-shadow: var(--shadow-soft);
}
.stat-card h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.stat-card p { margin: 0; font-weight: 600; }
.form-section {
padding: 16px 0 4px;
border-top: 1px solid var(--border);
margin-top: 16px;
}
.form-section:first-of-type { border-top: none; margin-top: 0; }
.form-section h3 { margin: 0 0 10px; font-size: 16px; }
.page-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.page-head h1,
.page-head h2 { margin: 0; }
.page-head h1 {
font-size: var(--fs-page-title);
font-weight: 700;
letter-spacing: -0.02em;
line-height: var(--lh-tight);
color: var(--text);
}
.progress-wrap {
background: #f0f2f5;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
height: 10px;
}
.progress-fill {
height: 100%;
background: var(--accent);
}
.info-grid { display: grid; gap: 16px; }
@media (min-width: 980px) { .info-grid { grid-template-columns: 1.2fr 0.8fr; } }
.action-grid { display: grid; gap: 12px; }
@media (min-width: 780px) { .action-grid { grid-template-columns: repeat(3, 1fr); } }
.action-card {
padding: 14px;
border-radius: 4px;
background: #ffffff;
border: 1px solid var(--border);
}
.action-card h4 { margin: 0 0 6px; font-size: 14px; }
.action-card p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.table-actions a { color: var(--accent); text-decoration: none; font-weight: 500; }
.table-actions a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Brand logo — iSHIP wordmark (color on light, white on dark) */
img[src$="/logo.png"]:not(.crew-dash-logo-img),
img[src$="/iship-logo.png"]:not(.crew-dash-logo-img),
img[src$="/crewlogo.png"]:not(.crew-dash-logo-img),
img[src="/logo.png"]:not(.crew-dash-logo-img),
img[src="/iship-logo.png"]:not(.crew-dash-logo-img),
img.brand-logo,
img.logo {
content: url('../iship-logo.png');
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
filter: none !important;
}
html[data-theme="dark"] img[src$="/logo.png"]:not(.crew-dash-logo-img),
html[data-theme="dark"] img[src$="/iship-logo.png"]:not(.crew-dash-logo-img),
html[data-theme="dark"] img[src="/logo.png"]:not(.crew-dash-logo-img),
html[data-theme="dark"] img[src="/iship-logo.png"]:not(.crew-dash-logo-img),
html[data-theme="dark"] img.brand-logo,
html[data-theme="dark"] img.logo,
body.admin-layout-sidebar[data-sidebar-skin="blue"] .admin-sidebar-brand .brand-logo,
body.admin-layout-sidebar[data-sidebar-skin="dark"] .admin-sidebar-brand .brand-logo,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="dark"] .admin-sidebar-brand .brand-logo,
body.crew-app[data-sidebar-skin="blue"] .admin-sidebar-brand .brand-logo,
body.crew-app[data-sidebar-skin="dark"] .admin-sidebar-brand .brand-logo,
body.crew-app[data-sidebar-skin="custom"][data-sidebar-custom-tone="dark"] .admin-sidebar-brand .brand-logo,
body.agency-manning-app .agency-manning-rail-brand-link .brand-logo {
content: url('../iship-logo-white.png');
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
filter: none !important;
}
.hero-shell { display: grid; gap: 24px; align-items: center; padding: 12px 0; }
@media (min-width: 980px) { .hero-shell { grid-template-columns: 1.15fr 0.85fr; } }
.hero-title { font-size: clamp(26px, 4.5vw, 42px); margin: 8px 0 12px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.hero-sub { font-size: 16px; color: var(--muted); margin: 0 0 20px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn-primary { background: var(--accent); color: #fff; border: none; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, transform .15s; }
.hero-actions .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }
.hero-actions .btn-secondary { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background .2s, border-color .2s; }
.hero-actions .btn-secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.stat-strip { display: grid; gap: 12px; }
@media (min-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-chip {
padding: 14px 16px;
border-radius: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
}
.stat-chip h4 { margin: 0 0 6px; font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-chip p { margin: 0; font-weight: 600; color: #fff; font-size: 15px; }
.feature-strip {
display: grid;
gap: 20px;
margin-top: 24px;
padding: 24px;
border-radius: 16px;
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
@media (min-width: 900px) { .feature-strip { grid-template-columns: repeat(3, 1fr); } }
.feature { padding: 8px; }
.feature h3 { margin: 10px 0 8px; font-size: 17px; font-weight: 600; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cta-strip {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 24px;
padding: 24px 28px;
border-radius: 16px;
background: var(--navy);
border: 1px solid var(--border);
color: #fff;
}
.cta-strip h2 { color: #fff; margin: 0 0 6px; font-size: 20px; }
.cta-strip .muted { color: rgba(255,255,255,0.7); }
.cta-strip .btn-primary { background: var(--accent); color: #fff; }
.cta-strip .btn-secondary { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
/* Landing page */
.page-landing { background: var(--bg); }
.landing-hero {
background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
color: #fff;
padding: 48px 24px 56px;
margin-bottom: 32px;
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(-50vw + 50%);
border-radius: 0 0 24px 24px;
}
.landing-hero::before {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 70%;
height: 140%;
background: radial-gradient(ellipse, rgba(13, 148, 136, 0.15) 0%, transparent 60%);
pointer-events: none;
}
.landing-hero .container { padding: 0 24px; }
.landing-hero .badge { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.15); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.landing-hero .hero-title { color: #fff; }
.landing-hero .hero-sub { color: rgba(255,255,255,0.75); }
.landing-hero .hero-media .stat-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
.landing-hero .hero-media .stat-chip p { color: rgba(255,255,255,0.95); }
.landing-features { margin-top: 32px; }
.landing-features .feature { border-radius: 14px; padding: 20px; background: var(--card); border: 1px solid var(--border); transition: box-shadow .2s, border-color .2s; }
.landing-features .feature:hover { box-shadow: var(--shadow); border-color: var(--accent-light); }
.landing-features .feature svg { width: 40px; height: 40px; color: var(--accent); }
.auth-layout { display: grid; gap: 20px; align-items: stretch; margin-top: 16px; }
@media (min-width: 980px) { .auth-layout { grid-template-columns: 1.1fr 0.9fr; } }
.auth-hero {
padding: 20px;
border-radius: 4px;
background: #f7f7f7;
border: 1px solid var(--border);
}
.auth-panel {
padding: 20px;
border-radius: 4px;
background: var(--card);
border: 1px solid var(--border);
}
.auth-title { margin: 0 0 10px; font-size: 22px; }
.auth-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; color: var(--muted); font-size: 14px; }
.dashboard-layout {
display: grid;
gap: 20px;
}
@media (min-width: 980px) {
.dashboard-layout { grid-template-columns: 1fr; }
}
.kpi-grid {
display: grid;
gap: 16px;
}
@media (min-width: 980px) {
.kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.kpi-card {
padding: 14px 16px;
border-radius: 4px;
background: var(--card);
border: 1px solid var(--border);
}
.kpi-card h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-card p { margin: 0; font-weight: 600; font-size: 18px; }
.chart-grid {
display: grid;
gap: 16px;
}
@media (min-width: 980px) {
.chart-grid { grid-template-columns: 1.4fr 1fr; }
}
.chart-card {
padding: 16px;
border-radius: 4px;
background: var(--card);
border: 1px solid var(--border);
}
.bar-chart {
display: grid;
grid-auto-flow: column;
gap: 12px;
align-items: end;
height: 180px;
padding: 10px 4px 0;
}
.bar-item { text-align: center; font-size: 12px; color: var(--muted); }
.bar {
width: 28px;
margin: 0 auto 8px;
background: var(--accent);
}
.modern-dashboard .panel,
.modern-dashboard .chart-card,
.modern-dashboard .kpi-card,
.modern-dashboard .action-card {
border-radius: 10px;
border: 1px solid var(--border);
box-shadow: var(--shadow, 0 8px 20px rgba(16, 24, 40, 0.08));
background: var(--card);
}
.dashboard-shell {
max-width: 1200px;
margin: 0 auto;
}
.dashboard-section {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px;
box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
}
.dashboard-section + .dashboard-section { margin-top: 20px; }
.section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.section-heading h2,
.section-heading h3 { margin: 0; }
.modern-dashboard .kpi-card {
border-left: 4px solid var(--accent);
background: #fbfcff;
}
.modern-dashboard .progress-wrap {
height: 8px;
background: #edf1f7;
border-radius: 999px;
border: none;
}
.modern-dashboard .progress-fill {
border-radius: 999px;
background: var(--accent);
}
.modern-dashboard .bar {
background: var(--accent);
border-radius: 6px 6px 0 0;
}
.modern-dashboard .section-title h2,
.modern-dashboard .section-title h3 {
font-weight: 600;
}
.chart-split {
display: grid;
gap: 16px;
}
@media (min-width: 980px) {
.chart-split { grid-template-columns: 1.2fr 0.8fr; }
}
.line-chart {
position: relative;
height: 200px;
margin-top: 12px;
border-left: 1px solid #dfe3ea;
border-bottom: 1px solid #dfe3ea;
background: repeating-linear-gradient(
to top,
rgba(15, 76, 129, 0.06) 0,
rgba(15, 76, 129, 0.06) 1px,
transparent 1px,
transparent 40px
);
}
.line-chart svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.line-chart .grid-line {
stroke: #e6eaf0;
stroke-width: 1;
}
.line-chart .trend-line {
stroke: var(--accent);
stroke-width: 3;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.line-chart .trend-point {
fill: var(--accent);
}
.chart-labels {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
font-size: 11px;
color: var(--muted);
margin-top: 8px;
}
.donut {
width: 140px;
height: 140px;
margin: 0 auto;
border-radius: 50%;
background: conic-gradient(var(--accent) 0 45%, var(--accent-2) 45% 70%, #94a3b8 70% 100%);
}
.donut.empty {
background: conic-gradient(#d7dce5 0 100%);
}
.legend {
display: grid;
gap: 6px;
margin-top: 10px;
font-size: 12px;
color: var(--muted);
}
.donut-wrap {
display: grid;
gap: 10px;
justify-items: center;
}
.full-bleed .panel {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.full-bleed .panel + .panel { margin-top: 20px; }
.full-bleed .section-divider {
border-bottom: 1px solid #e3e7ee;
margin: 16px 0;
}
/* Crew top nav — minimal system bar */
.crew-topnav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 10px 22px;
box-sizing: border-box;
border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
}
.crew-topnav-left {
flex-shrink: 0;
}
.crew-topnav-left .brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text);
}
.crew-topnav-left .brand-logo {
height: 34px;
width: auto;
border-radius: var(--radius);
}
.crew-topnav-left .brand-wordmark {
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.02em;
}
.crew-topnav-center {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.crew-topnav-center a {
color: var(--muted);
text-decoration: none;
font-size: 13px;
font-weight: 500;
padding: 6px 10px;
border-radius: var(--radius);
transition: color .15s, background .15s;
}
.crew-topnav-center a:hover {
color: var(--text);
background: var(--accent-light);
}
.crew-topnav-center a.active {
color: var(--text);
font-weight: 600;
background: var(--accent-light);
}
.crew-topnav-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.crew-topnav-search {
width: 180px;
padding: 8px 12px 8px 36px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236e6e73' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 12px 50%;
background-size: 16px;
}
.crew-topnav-search:focus {
outline: none;
border-color: #0071e3;
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}
.crew-topnav-actions {
display: flex;
align-items: center;
gap: 8px;
}
.crew-topnav-actions a,
.crew-topnav-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--muted);
cursor: pointer;
text-decoration: none;
position: relative;
transition: color .15s, background .15s;
}
.crew-topnav-actions a:hover,
.crew-topnav-actions button:hover {
color: var(--text);
background: var(--accent-light);
}
.crew-topnav-actions .nav-bell-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #dc2626;
}
.crew-avatar-wrap {
position: relative;
}
.crew-avatar-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--card);
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text);
}
.crew-avatar-btn:hover {
border-color: var(--accent);
background: var(--accent-light);
}
.crew-avatar-btn img,
.crew-avatar-initials {
width: 30px;
height: 30px;
border-radius: var(--radius);
background: #1d1d1f;
color: #f5f5f7;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.crew-avatar-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 180px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 4px;
z-index: 100;
display: none;
}
.crew-avatar-dropdown.open {
display: block;
}
.crew-avatar-dropdown a {
display: block;
padding: 10px 12px;
color: var(--text);
text-decoration: none;
font-size: 13px;
border-radius: 4px;
}
.crew-avatar-dropdown a:hover {
background: var(--accent-light);
color: var(--accent-2);
}
@media (max-width: 1024px) {
.crew-topnav-center { display: none; }
.crew-topnav-search { width: 140px; }
}
@media (max-width: 640px) {
.crew-topnav-search { display: none; }
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
margin-right: 4px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--admin-sidebar-muted);
cursor: pointer;
flex-shrink: 0;
vertical-align: middle;
}
/* Keep the theme-switching implementation available, but do not expose it until dark mode returns. */
.theme-toggle {
display: none !important;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--admin-sidebar-text);
}
.theme-toggle .theme-ic-moon { display: block; }
.theme-toggle .theme-ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-ic-sun { display: block; }
[data-theme="dark"] .admin-nav-left .brand-logo {
background: transparent;
border-color: var(--border);
}
/* Pinned rail: menu icon stays visible (open) but does not collapse the sidebar */
body.admin-nav-pinned .admin-nav-toggle {
pointer-events: none;
cursor: default;
opacity: 0.65;
}
/* =====================================================
ADMIN SIDEBAR SHELL — FIXED POSITION, INDEPENDENT
Matches iSHIP+ style: dark navy, fixed left sidebar
===================================================== */
/* Context strip stays visible; inline logo toggle opens the menu header. */
body.admin-layout-sidebar {
--admin-trial-slot: 0px;
--admin-context-slot: var(--admin-preheader-height);
--admin-topbar-slot: 0px;
}
/* Sidebar mode: drop the extra white context strip; main header + nav carry chrome */
body.admin-app.admin-layout-sidebar:not(.agency-manning-app) {
--admin-context-slot: 0px;
--admin-trial-slot: 0px;
}
body.admin-app.admin-layout-sidebar:not(.agency-manning-app) .preheader.admin-context-strip {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
border: none !important;
}
/* Sidebar chrome uses a 56px header; default --admin-header-height is 64px and
leaves a visible body-bg gap under the fixed bar. */
body.admin-app.admin-layout-sidebar:not(.agency-manning-app) {
--admin-header-height: 40px;
}
/* Trial strip removed — keep header flush to the top */
body.admin-layout-sidebar:has(.preheader-trial),
body.has-trial-banner,
body.admin-app:has(.preheader-trial) {
--admin-trial-slot: 0px;
}
body.admin-app .preheader.preheader-trial,
body.admin-app.admin-layout-sidebar .preheader.preheader-trial,
.preheader.preheader-trial {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.admin-app.admin-layout-sidebar header.admin-header,
body.admin-layout-sidebar header.admin-header {
top: 0 !important;
}
.admin-header-trial-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
color: #065f46;
background: #ecfdf5;
border: 1px solid #a7f3d0;
white-space: nowrap;
}
[data-theme="dark"] .admin-header-trial-chip {
color: #a7f3d0;
background: rgba(16, 185, 129, 0.15);
border-color: rgba(110, 231, 183, 0.35);
}
/* Sidebar panel fills fixed .nav-links (never position:fixed here — that removes it
from the rail flex context and the transparent shell shows page bg as a strip). */
body.admin-layout-sidebar .admin-nav-skin-open {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
flex: 1 1 auto !important;
min-height: 0 !important;
z-index: 210 !important;
background: var(--admin-sidebar-bg) !important;
border-right: none !important;
display: flex !important;
flex-direction: column !important;
}
/* Preheader trial strip removed — never show */
body.admin-app.admin-layout-sidebar .preheader.preheader-trial {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: none !important;
}
body.admin-layout-sidebar .preheader.admin-context-strip {
display: block !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: var(--admin-trial-slot) !important;
z-index: 195 !important;
margin: 0 !important;
padding: 0 !important;
background: var(--preheader-bg) !important;
border-bottom: 1px solid var(--preheader-border) !important;
box-shadow: none !important;
color: var(--preheader-text) !important;
}
[data-theme="dark"].admin-layout-sidebar .preheader.admin-context-strip {
background: var(--preheader-bg) !important;
border-bottom-color: var(--preheader-border) !important;
color: var(--preheader-text) !important;
}
body.admin-layout-sidebar .preheader.admin-context-strip .preheader-shell {
padding-left: var(--admin-sidebar-width) !important;
padding-right: 16px !important;
min-height: var(--admin-preheader-height) !important;
}
/* Header is below trial bar, context strip, but content after sidebar */
body.admin-layout-sidebar header.admin-header:not(.agency-manning-header) {
position: fixed !important;
top: calc(var(--admin-trial-slot) + var(--admin-context-slot)) !important;
left: var(--admin-sidebar-width) !important;
right: 0 !important;
z-index: 200 !important;
height: 48px !important;
min-height: 48px !important;
background: #ffffff !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 0 !important;
}
html[data-theme="dark"] body.admin-layout-sidebar header.admin-header:not(.agency-manning-header),
[data-theme="dark"] body.admin-layout-sidebar header.admin-header:not(.agency-manning-header) {
background: #0a0a0a !important;
border-bottom-color: var(--border) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.agency-manning-app.admin-layout-sidebar .admin-sidebar-brand {
display: none !important;
}
[data-theme="dark"].admin-layout-sidebar.agency-manning-app .agency-manning-rail a.agency-nav-link {
color: #e2e8f0 !important;
}
[data-theme="dark"].admin-layout-sidebar.agency-manning-app .agency-manning-rail a.agency-nav-link:hover {
background: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"].admin-layout-sidebar.agency-manning-app .agency-manning-rail a.agency-nav-link.active {
background: rgba(37, 99, 235, 0.2) !important;
color: #93c5fd !important;
}
[data-theme="dark"].admin-layout-sidebar.agency-manning-app .admin-sidebar-brand {
display: none !important;
}
[data-theme="dark"].admin-layout-sidebar header.admin-header,
html[data-theme="dark"] body.admin-layout-sidebar header.admin-header {
background: #0a0a0a !important;
border-bottom-color: var(--border) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.admin-layout-sidebar header.admin-header .header-shell:not(.agency-manning-header-shell) {
height: 48px !important;
min-height: 48px !important;
padding: 0 24px !important;
display: flex !important;
align-items: center !important;
}
body.admin-layout-sidebar .admin-header nav:not(.agency-manning-nav) {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
height: 48px !important;
min-height: 48px !important;
gap: 24px !important;
}
body.admin-layout-sidebar {
--admin-rail-w: var(--admin-sidebar-width);
--admin-rail-gap: 0px;
}
body.admin-layout-sidebar .admin-nav-left {
display: none !important;
}
/* — Brand inside rail — */
body.admin-layout-sidebar .admin-sidebar-brand {
display: flex !important;
align-items: center !important;
gap: 10px !important;
justify-content: flex-start !important;
min-height: 48px !important;
padding: 0 14px !important;
margin-bottom: 0 !important;
border-bottom: 1px solid var(--admin-sidebar-border) !important;
flex-shrink: 0 !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .brand {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .brand-logo {
height: 36px !important;
width: auto !important;
max-width: 170px !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .brand-wordmark strong {
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* — Nav sections & items — */
body.admin-layout-sidebar .admin-nav-section-label {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
color: var(--admin-sidebar-muted) !important;
padding: 16px 20px 6px !important;
margin-top: 0 !important;
border-top: none !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
body.admin-layout-sidebar .admin-nav-details {
margin: 0 !important;
overflow: hidden !important;
}
body.admin-layout-sidebar .admin-nav-details summary {
display: flex !important;
align-items: center !important;
min-height: 40px !important;
padding: 0 20px !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 500 !important;
color: var(--admin-sidebar-text) !important;
border-radius: 0 !important;
}
body.admin-layout-sidebar .admin-nav-details summary::after {
width: 6px !important;
height: 6px !important;
border-width: 1.5px !important;
}
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 36px !important;
padding: 0 20px 0 44px !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 400 !important;
border-radius: 0 !important;
color: var(--admin-sidebar-muted) !important;
text-decoration: none !important;
}
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub .icon {
width: 16px !important;
height: 16px !important;
display: block !important;
flex-shrink: 0 !important;
opacity: 0.7 !important;
}
body.admin-layout-sidebar .admin-nav-leaf {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 40px !important;
padding: 0 20px !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 500 !important;
color: var(--admin-sidebar-text) !important;
text-decoration: none !important;
}
body.admin-layout-sidebar .admin-nav-leaf .icon {
width: 16px !important;
height: 16px !important;
display: block !important;
flex-shrink: 0 !important;
opacity: 0.7 !important;
}
body.admin-layout-sidebar .admin-nav-skin-scroll {
flex: 1 1 0% !important;
min-height: 0 !important;
width: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 0 !important;
scrollbar-width: thin !important;
-webkit-overflow-scrolling: touch !important;
}
/* Active state for nav items */
body.admin-layout-sidebar .admin-nav-sub:hover,
body.admin-layout-sidebar .admin-nav-leaf:hover {
background: var(--admin-sidebar-hover) !important;
}
body.admin-layout-sidebar .admin-nav-sub.active,
body.admin-layout-sidebar .admin-nav-leaf.active {
color: var(--admin-sidebar-text) !important;
background: var(--admin-sidebar-active) !important;
box-shadow: inset 3px 0 0 var(--admin-sidebar-active-border) !important;
}
body.admin-layout-sidebar .admin-preheader-toggle svg {
display: block !important;
transition: transform 0.22s ease !important;
}
body.admin-layout-sidebar.admin-topbar-open .admin-preheader-toggle svg {
transform: rotate(180deg) !important;
}
body.admin-layout-sidebar .admin-topbar-menu {
display: none !important;
position: fixed !important;
left: var(--admin-rail-w) !important;
right: 0 !important;
top: calc(var(--admin-trial-slot) + var(--admin-context-slot) + 48px) !important;
z-index: 198 !important;
height: 148px !important;
padding: 12px 16px !important;
align-items: stretch !important;
gap: 10px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
flex-wrap: nowrap !important;
background: #fff !important;
border-bottom: 1px solid #e5e7eb !important;
box-sizing: border-box !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-topbar-menu {
background: #141414 !important;
border-bottom-color: #2a2a2a !important;
}
body.admin-layout-sidebar.admin-topbar-open .admin-topbar-menu {
display: flex !important;
}
body.admin-layout-sidebar .admin-menu-section {
flex: 0 0 220px !important;
min-width: 220px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 14px !important;
background: #f8fafc !important;
border: 1px solid #e5e7eb !important;
border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-menu-section {
background: #1a1a1a !important;
border-color: #2a2a2a !important;
}
body.admin-layout-sidebar .admin-menu-heading {
margin: 0 !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--muted);
}
[data-theme="dark"].admin-layout-sidebar .admin-menu-heading {
color: var(--admin-sidebar-muted);
}
body.admin-layout-sidebar .admin-menu-links {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
min-height: 0 !important;
}
body.admin-layout-sidebar .admin-menu-link {
display: block !important;
padding: 8px 10px !important;
border-radius: 10px !important;
color: #334155 !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
}
body.admin-layout-sidebar .admin-menu-link:hover {
background: #eef2ff !important;
color: #0f172a !important;
}
body.admin-layout-sidebar .admin-menu-link.active {
background: #2563eb !important;
color: #fff !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-menu-link {
color: #e5e7eb !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-menu-link:hover {
background: rgba(59, 130, 246, 0.18) !important;
color: #fff !important;
}
body.admin-layout-sidebar .admin-header-tools { margin-left: auto !important; }
/* — Left rail — */
body.admin-layout-sidebar:not(.agency-manning-app) .admin-header .nav-links {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: var(--admin-rail-w) !important;
height: 100vh !important;
max-height: 100vh !important;
padding: 0 !important;
overflow: hidden !important;
border-right: none !important;
background: transparent !important;
z-index: 210 !important;
box-shadow: none !important;
transition: width 0.2s ease !important;
box-sizing: border-box !important;
}
[data-theme="dark"].admin-layout-sidebar:not(.agency-manning-app) .admin-header .nav-links {
background: transparent !important;
}
body.admin-layout-sidebar .admin-nav-skin-closed { display: none !important; }
body.admin-layout-sidebar .admin-header-tools .theme-toggle {
margin-right: 0 !important;
border-color: var(--border) !important;
background: var(--card) !important;
color: var(--text) !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-header-tools .theme-toggle {
background: var(--card-strong) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-header-tools .admin-topbar-user .avatar {
background: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
color: #fff !important;
}
body.admin-layout-sidebar .admin-nav-skin-open {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
align-self: stretch !important;
min-height: 0 !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: var(--admin-sidebar-bg) !important;
border-right: 1px solid var(--admin-sidebar-border) !important;
box-shadow: var(--admin-sidebar-nav-shadow) !important;
}
body.admin-layout-sidebar .admin-nav-skin-scroll {
flex: 1 1 0% !important;
min-height: 0 !important;
width: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 4px 0 0 !important;
scrollbar-width: thin !important;
-webkit-overflow-scrolling: touch !important;
}
/* — Brand inside rail — */
body.admin-layout-sidebar .admin-sidebar-brand {
display: flex !important;
align-items: center !important;
gap: 10px !important;
justify-content: space-between !important;
min-height: 72px !important;
padding: 14px 14px 12px !important;
margin-bottom: 0 !important;
background: var(--admin-sidebar-bg) !important;
border-bottom: 1px solid var(--admin-sidebar-border) !important;
flex-shrink: 0 !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .brand {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .brand-logo {
height: 48px !important;
width: auto !important;
max-width: 200px !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .admin-preheader-toggle {
margin-left: auto !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .brand-wordmark strong {
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: var(--admin-sidebar-text) !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .brand-wordmark small {
font-size: 10px !important;
color: var(--admin-sidebar-muted) !important;
}
/* — Nav sections & items — */
body.admin-layout-sidebar .admin-nav-section-label {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
color: var(--admin-sidebar-group-color) !important;
padding: 12px 14px 5px !important;
margin-top: 4px !important;
border-top: none !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
body.admin-layout-sidebar .admin-nav-details {
border-radius: 6px !important;
margin: 0 8px 2px !important;
}
body.admin-layout-sidebar .admin-nav-details summary {
display: flex !important;
align-items: center !important;
min-height: 32px !important;
padding: 6px 10px !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
border-radius: 6px !important;
color: var(--admin-sidebar-text) !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-nav-details summary { color: var(--admin-sidebar-text) !important; }
body.admin-layout-sidebar .admin-nav-details summary::after {
width: 6px !important;
height: 6px !important;
border-width: 1.5px !important;
}
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub {
min-height: 30px !important;
padding: 5px 10px 5px 26px !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 400 !important;
border-radius: 6px !important;
color: var(--admin-sidebar-muted) !important;
text-decoration: none !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-nav-details .admin-nav-sub { color: var(--admin-sidebar-muted) !important; }
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub .icon {
width: 16px !important;
height: 16px !important;
display: block !important;
flex-shrink: 0 !important;
}
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-nav-details .admin-nav-sub:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
/* Active nav item */
body.admin-layout-sidebar .admin-header .nav-links .admin-nav-details .admin-nav-sub.active,
body.admin-layout-sidebar .admin-header .nav-links a.active,
body.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf.active {
background: var(--admin-sidebar-active) !important;
color: var(--admin-sidebar-active-text, var(--admin-sidebar-text)) !important;
font-weight: 600 !important;
box-shadow: inset 3px 0 0 var(--admin-sidebar-active-border) !important;
border: none !important;
}
body.admin-layout-sidebar .admin-header .nav-links .admin-nav-details .admin-nav-sub.active .icon,
body.admin-layout-sidebar .admin-header .nav-links a.active .icon {
color: var(--admin-sidebar-active-text, var(--admin-sidebar-text)) !important;
opacity: 1 !important;
}
/* Leaf links */
body.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 32px !important;
margin: 0 8px 2px !important;
padding: 6px 10px !important;
border-radius: 6px !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
color: var(--admin-sidebar-text) !important;
}
body.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf::after { display: none !important; }
body.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
/* Section spacer */
body.admin-layout-sidebar .admin-nav-section-spacer {
height: 0 !important;
margin: 6px 12px !important;
border-bottom: 1px solid var(--admin-sidebar-border) !important;
}
/* — Footer user — */
body.admin-layout-sidebar .admin-sidebar-footer {
flex-shrink: 0 !important;
margin-top: auto !important;
padding: 8px 8px 6px !important;
border-top: 1px solid var(--admin-sidebar-border) !important;
}
[data-theme="dark"] body.admin-layout-sidebar .admin-sidebar-footer {
border-top-color: var(--admin-sidebar-border) !important;
}
[data-theme="dark"] .admin-sidebar-footer-link { color: var(--admin-sidebar-muted) !important; }
[data-theme="dark"] .admin-sidebar-footer-link:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
body.admin-layout-sidebar .admin-sidebar-user {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px !important;
border-radius: 8px !important;
background: var(--admin-sidebar-user-bg) !important;
border: 1px solid var(--admin-sidebar-border) !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-sidebar-user { background: var(--admin-sidebar-user-bg) !important; }
body.admin-layout-sidebar .admin-sidebar-user-avatar {
width: 32px !important;
height: 32px !important;
font-size: 11px !important;
}
body.admin-layout-sidebar .admin-sidebar-user-text strong {
font-size: 12px !important;
color: var(--admin-sidebar-user-strong) !important;
}
body.admin-layout-sidebar .admin-sidebar-user-text span {
font-size: 11px !important;
color: var(--admin-sidebar-muted) !important;
font-weight: 600 !important;
}
[data-theme="dark"].admin-layout-sidebar .admin-sidebar-user-text span {
color: var(--admin-sidebar-muted) !important;
}
body.admin-layout-sidebar .admin-sidebar-footer a {
margin-top: 4px !important;
font-size: 12px !important;
color: var(--admin-sidebar-muted) !important;
}
body.admin-layout-sidebar .admin-sidebar-footer a:hover {
color: var(--admin-sidebar-text) !important;
background: var(--admin-sidebar-hover) !important;
}
/* — Main content offset — (manning agency uses in-header nav; see agency-manning-app rules) */
body.admin-layout-sidebar:not(.agency-manning-app) main.container-full,
body.admin-layout-sidebar:not(.agency-manning-app) main.container:not(.container-full) {
margin-top: calc(var(--admin-header-height, 48px) + var(--admin-trial-slot) + var(--admin-context-slot) + var(--admin-topbar-slot)) !important;
/* Swap pure padding offset to a margin so 'margin: 0 auto' doesn't fight the sidebar space */
margin-left: calc(var(--admin-rail-w)) !important;
margin-right: 0 !important;
padding-left: 0 !important;
max-width: none !important;
transition: margin-left 0.22s ease, margin-top 0.22s ease !important;
}
/* — Sidebar rail (fixed #1c2b46 + white type via CSS vars) — */
body.admin-layout-sidebar .admin-nav-skin-open {
background: var(--admin-sidebar-bg) !important;
border-right: none !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-sidebar-brand {
background: var(--admin-sidebar-bg) !important;
border-bottom-color: var(--admin-sidebar-border) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-nav-section-label {
color: var(--admin-sidebar-group-color) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-nav-leaf {
color: var(--admin-sidebar-text) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-nav-leaf:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-nav-leaf.active {
background: var(--admin-sidebar-active) !important;
color: var(--admin-sidebar-active-text) !important;
box-shadow: inset -3px 0 0 var(--admin-sidebar-active-border) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-nav-details summary {
color: var(--admin-sidebar-text) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-nav-details .admin-nav-sub {
color: var(--admin-sidebar-muted) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-nav-details .admin-nav-sub:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-nav-details .admin-nav-sub.active {
background: var(--admin-sidebar-active) !important;
color: var(--admin-sidebar-active-text) !important;
box-shadow: inset -3px 0 0 var(--admin-sidebar-active-border) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-sidebar-user {
background: var(--admin-sidebar-user-bg) !important;
}
body.admin-layout-sidebar .admin-nav-skin-open .admin-sidebar-footer {
border-top-color: var(--admin-sidebar-border) !important;
background: var(--admin-sidebar-bg) !important;
}
/* Overlay not needed in sidebar mode - always visible */
body.admin-layout-sidebar .admin-overlay { display: none !important; }
/* Mobile: hide sidebar completely */
@media (max-width: 768px) {
body.admin-layout-sidebar .admin-nav-skin-open {
display: none !important;
}
body.admin-layout-sidebar header.admin-header:not(.agency-manning-header) {
left: 0 !important;
}
body.admin-layout-sidebar:not(.agency-manning-app) main.container-full,
body.admin-layout-sidebar:not(.agency-manning-app) main.container:not(.container-full) {
padding-left: 0 !important;
}
}
body.admin-app.admin-layout-topbar .admin-nav-left {
display: flex !important;
}
body.admin-app.admin-layout-topbar .admin-nav-left .admin-nav-toggle {
display: inline-flex !important;
}
/* Top-header only layout (for non-sidebar mode) */
body.admin-app:not(.admin-layout-sidebar) .admin-nav-skin-open,
body.admin-app:not(.admin-layout-sidebar) .admin-sidebar-footer {
display: none !important;
}
body.admin-app:not(.admin-layout-sidebar) .admin-nav-toggle {
display: flex !important;
}
/* Admin: force a clean top-header layout (no left sidebar rail) */
body.admin-app .admin-overlay,
body.admin-app .admin-nav-skin-open,
body.admin-app .admin-sidebar-footer {
display: none !important;
}
body.admin-app .admin-nav-toggle {
display: inline-flex !important;
}
body.admin-app header.admin-header,
body.admin-app .preheader,
body.admin-app main.container,
body.admin-app main.container-full {
left: 0 !important;
padding-left: 0 !important;
}
body.admin-app .admin-header .header-shell,
body.admin-app .admin-header nav {
max-width: 100% !important;
width: 100% !important;
}
/* Top-header mode global horizontal gutters for consistent page alignment */
body.admin-app:not(.admin-layout-sidebar) .preheader .preheader-shell,
body.admin-app:not(.admin-layout-sidebar) .admin-header .header-shell,
body.admin-app:not(.admin-layout-sidebar) main.container,
body.admin-app:not(.admin-layout-sidebar) main.container-full {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
body.admin-app:not(.admin-layout-sidebar) main.container,
body.admin-app:not(.admin-layout-sidebar) main.container-full {
padding-top: 10px !important;
}
body.admin-app .admin-header .nav-links {
position: static !important;
inset: auto !important;
transform: none !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
padding: 0 !important;
margin-left: 16px !important;
}
body.admin-app .admin-header .admin-nav-skin-closed {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding-bottom: 2px;
scrollbar-width: thin;
}
body.admin-app .admin-header .admin-nav-skin-closed > a,
body.admin-app .admin-header .admin-nav-skin-closed .nav-more-wrap {
flex: 0 0 auto;
}
body.admin-app .admin-header-tools {
margin-left: auto !important;
}
body.admin-app .admin-header {
background: #ffffff !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: sticky !important;
top: 0 !important;
z-index: 3000 !important;
}
[data-theme="dark"] body.admin-app .admin-header {
background: #0a0a0a !important;
border-bottom-color: var(--border) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.admin-app .preheader:not(.preheader-trial) {
display: block !important;
position: static !important;
top: auto !important;
z-index: auto !important;
padding-left: 0 !important;
margin: 0 !important;
background: var(--preheader-bg) !important;
opacity: 1 !important;
border-bottom: 1px solid var(--preheader-border) !important;
color: var(--preheader-text) !important;
}
body.admin-app .preheader:not(.preheader-trial) .preheader-shell {
min-height: 32px !important;
padding: 3px 14px !important;
}
body.admin-app .admin-header .header-shell {
min-height: 58px !important;
padding: 0 18px !important;
}
body.admin-app .admin-header nav {
min-height: 58px !important;
align-items: center !important;
gap: 4px !important;
}
body.admin-app .admin-nav-left .brand-logo {
height: 52px !important;
width: auto;
max-width: 240px;
opacity: 1;
}
body.admin-app .nav-links {
display: none !important;
}
body.admin-app .admin-topbar-menu {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
white-space: nowrap;
overflow-x: auto !important;
overflow-y: visible !important;
gap: 0;
padding: 0 6px 0 6px;
}
body.admin-app .admin-topbar-dropdown {
position: relative !important;
flex: 0 0 auto;
}
body.admin-app .admin-topbar-trigger {
min-height: 34px !important;
padding: 0 6px !important;
border-radius: 6px !important;
color: #334155 !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
transition: all .16s ease;
}
body.admin-app .admin-topbar-trigger:hover {
background: #f1f5f9 !important;
color: #0f172a !important;
}
body.admin-app .admin-topbar-trigger.active,
body.admin-app .admin-topbar-dropdown.is-active .admin-topbar-trigger,
body.admin-app .admin-topbar-dropdown.is-open .admin-topbar-trigger {
background: #eef2ff !important;
color: #1d4ed8 !important;
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}
body.admin-app .admin-topbar-chevron {
width: 13px !important;
height: 13px !important;
opacity: .8;
transition: transform .16s ease;
}
body.admin-app .admin-topbar-dropdown.is-open .admin-topbar-chevron {
transform: rotate(180deg);
}
body.admin-app .admin-topbar-panel {
display: none !important;
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: auto !important;
min-width: 230px;
max-width: 320px;
z-index: 260 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid rgba(148, 163, 184, 0.28) !important;
border-radius: 8px !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14) !important;
}
body.admin-app .admin-topbar-dropdown.is-open .admin-topbar-panel {
display: grid !important;
gap: 4px;
}
body.admin-app .admin-topbar-panel a {
white-space: nowrap;
min-height: 34px !important;
padding: 7px 10px !important;
border-radius: 6px !important;
color: #334155 !important;
font-size: 12px !important;
font-weight: 600 !important;
}
body.admin-app .admin-topbar-panel a:hover {
background: #f1f5f9 !important;
color: #0f172a !important;
}
body.admin-app .admin-topbar-panel a.active {
background: #eef2ff !important;
color: #1d4ed8 !important;
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25) !important;
}
/* Fallback open behavior so submenus always appear in topbar mode */
body.admin-app:not(.admin-layout-sidebar) .admin-topbar-dropdown:hover .admin-topbar-panel,
body.admin-app:not(.admin-layout-sidebar) .admin-topbar-dropdown:focus-within .admin-topbar-panel {
display: grid !important;
gap: 4px !important;
}
/* Ultimate fallback: any JS-opened dropdown must render panel */
body.admin-app .admin-topbar-dropdown.is-open > .admin-topbar-panel {
display: grid !important;
gap: 4px !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Global hard fallback for top header submenu visibility */
header.admin-header,
header.admin-header .header-shell,
header.admin-header nav,
header.admin-header .admin-topbar-menu,
header.admin-header .admin-topbar-dropdown {
overflow: visible !important;
}
header.admin-header .admin-topbar-dropdown:hover > .admin-topbar-panel,
header.admin-header .admin-topbar-dropdown:focus-within > .admin-topbar-panel {
display: grid !important;
gap: 4px !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Authoritative top-header source: use dropdown topbar, hide simplified strip */
body.admin-app:not(.admin-layout-sidebar) .admin-topbar-menu {
display: flex !important;
}
body.admin-app:not(.admin-layout-sidebar) .admin-nav-skin-closed {
display: none !important;
}
/* FINAL AUTHORITATIVE NAV OVERRIDE:
Keep dropdown menu visible in header regardless of sidebar/topbar mode. */
body.admin-app .admin-topbar-menu {
display: flex !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
height: auto !important;
min-height: 0 !important;
width: auto !important;
max-width: none !important;
padding: 0 6px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
flex-wrap: nowrap !important;
z-index: 2600 !important;
}
body.admin-app .admin-topbar-dropdown {
position: relative !important;
z-index: 3200 !important;
}
body.admin-app .admin-topbar-panel {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
display: none !important;
min-width: 220px !important;
max-width: 340px !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22) !important;
z-index: 3210 !important;
}
[data-theme="dark"].admin-app .admin-topbar-panel {
background: #0f172a !important;
border-color: #334155 !important;
}
body.admin-app .admin-topbar-dropdown.is-open > .admin-topbar-panel,
body.admin-app .admin-topbar-dropdown:hover > .admin-topbar-panel,
body.admin-app .admin-topbar-dropdown:focus-within > .admin-topbar-panel {
display: grid !important;
gap: 4px !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
body.admin-app .admin-topbar-dropdown.is-open {
z-index: 3211 !important;
}
body.admin-app .admin-header .nav-more-wrap.is-open .nav-more-panel {
z-index: 3210 !important;
}
body.admin-app .admin-topbar-panel a {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
min-height: 34px !important;
padding: 8px 10px !important;
border-radius: 6px !important;
color: #0f172a !important;
font-size: 12px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
text-decoration: none !important;
background: transparent !important;
}
[data-theme="dark"].admin-app .admin-topbar-panel a {
color: #e2e8f0 !important;
}
body.admin-app .admin-topbar-panel a:hover {
background: #eff6ff !important;
color: #0f172a !important;
}
[data-theme="dark"].admin-app .admin-topbar-panel a:hover {
background: #1e293b !important;
color: #f8fafc !important;
}
body.admin-app .admin-topbar-panel a.active {
background: #dbeafe !important;
color: #1d4ed8 !important;
}
[data-theme="dark"].admin-app .admin-topbar-panel a.active {
background: rgba(59, 130, 246, 0.24) !important;
color: #bfdbfe !important;
}
body.admin-app .admin-nav-skin-closed {
display: none !important;
}
body.admin-app .admin-header,
body.admin-app .admin-header .header-shell,
body.admin-app .admin-header nav,
body.admin-app .admin-topbar-menu,
body.admin-app .admin-topbar-dropdown,
body.admin-app .admin-topbar-trigger {
pointer-events: auto !important;
}
body.admin-app .admin-header-tools .theme-toggle,
body.admin-app .admin-header-tools .admin-sidebar-color-trigger {
width: 32px !important;
height: 32px !important;
border-radius: 999px !important;
border: 1px solid var(--border) !important;
background: var(--card) !important;
color: var(--text) !important;
}
/* Theme color trigger is a live brand swatch (same hex as sidebar). */
body.admin-app .admin-header-tools .admin-sidebar-color-trigger {
background: var(--admin-sidebar-bg, var(--ui-primary, #2563eb)) !important;
color: var(--admin-sidebar-text, #fff) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
body.admin-app .admin-header-tools .admin-header-profile {
width: auto !important;
height: auto !important;
min-height: 36px !important;
border-radius: 10px !important;
border: 1px solid var(--border) !important;
background: var(--card) !important;
color: var(--text) !important;
padding: 4px 10px 4px 4px !important;
}
@media (min-width: 900px) {
body.admin-app .admin-header-tools .admin-header-profile {
padding: 4px !important;
border: none !important;
background: transparent !important;
}
body.admin-app .admin-header-tools .admin-header-profile:hover {
background: var(--accent-light) !important;
}
}
body.admin-app .admin-header-tools .theme-toggle:hover,
body.admin-app .admin-header-tools .admin-header-profile:hover {
background: var(--accent-light) !important;
border-color: var(--glass-border) !important;
}
body.admin-app .admin-header-tools .admin-sidebar-color-trigger:hover,
body.admin-app .admin-sidebar-color-wrap.is-open .admin-sidebar-color-trigger {
background: var(--admin-sidebar-bg, var(--ui-primary, #2563eb)) !important;
filter: brightness(1.08);
border-color: var(--glass-border) !important;
}
[data-theme="dark"] body.admin-app .admin-header-tools .theme-toggle,
[data-theme="dark"] body.admin-app .admin-header-tools .admin-header-profile {
background: var(--card-strong) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
[data-theme="dark"] body.admin-app .admin-header-tools .admin-sidebar-color-trigger {
background: var(--admin-sidebar-bg, var(--ui-primary, #2563eb)) !important;
color: var(--admin-sidebar-text, #fff) !important;
border-color: var(--border) !important;
}
body.admin-app .admin-profile-menu {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
box-shadow: var(--shadow) !important;
color: var(--text) !important;
}
body.admin-app .admin-profile-menu a {
color: var(--text) !important;
font-weight: 600 !important;
}
body.admin-app .admin-profile-menu a:hover {
background: var(--admin-chrome-hover) !important;
color: var(--text) !important;
}
body.admin-app .admin-profile-menu a[href*="logout"] {
color: #dc2626 !important;
}
body.admin-app .admin-profile-menu a[href*="logout"]:hover {
background: #fef2f2 !important;
color: #b91c1c !important;
}
[data-theme="dark"] body.admin-app .admin-profile-menu a[href*="logout"] {
color: #f87171 !important;
}
[data-theme="dark"] body.admin-app .admin-profile-menu a[href*="logout"]:hover {
background: rgba(239, 68, 68, 0.14) !important;
color: #fca5a5 !important;
}
body.admin-app .admin-header,
body.admin-app .admin-header .header-shell,
body.admin-app .admin-header nav,
body.admin-app .admin-topbar-menu {
overflow: visible !important;
}
body.admin-app header.admin-header {
left: 0 !important;
right: 0 !important;
margin: 0 !important;
padding-left: 0 !important;
}
body.admin-app main.container,
body.admin-app main.container-full {
margin-top: 0 !important;
padding-top: 6px !important;
}
@media (max-width: 900px) {
body.admin-app:not(.admin-layout-sidebar) .preheader .preheader-shell,
body.admin-app:not(.admin-layout-sidebar) .admin-header .header-shell,
body.admin-app:not(.admin-layout-sidebar) main.container,
body.admin-app:not(.admin-layout-sidebar) main.container-full {
padding-left: 12px !important;
padding-right: 12px !important;
}
body.admin-app:not(.admin-layout-sidebar) main.container,
body.admin-app:not(.admin-layout-sidebar) main.container-full {
padding-top: 6px !important;
}
body.admin-app .admin-header .header-shell {
min-height: 54px !important;
padding: 0 12px !important;
}
body.admin-app .admin-topbar-menu {
gap: 0;
padding: 0 4px;
}
body.admin-app .admin-topbar-trigger {
min-height: 34px !important;
padding: 0 6px !important;
}
}
/* Sidebar mode override for admin app: keep all regions aligned */
body.admin-app.admin-layout-sidebar .admin-nav-skin-closed,
body.admin-app.admin-layout-sidebar .admin-topbar-menu {
display: none !important;
}
body.admin-app .admin-header,
body.admin-app .admin-header .header-shell,
body.admin-app .admin-header nav {
overflow: visible !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-footer {
display: block !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: var(--admin-sidebar-width) !important;
max-width: var(--admin-sidebar-width) !important;
right: auto !important;
height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
/* Transparent shell: inner .admin-nav-skin-open paints the full rail (avoids white “ghost” strip). */
background: transparent !important;
border-right: none !important;
box-sizing: border-box !important;
z-index: 210 !important;
overflow: hidden !important;
pointer-events: auto !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-skin-open {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
align-self: stretch !important;
min-height: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
box-sizing: border-box !important;
background: var(--admin-sidebar-bg, #ffffff) !important;
border-right: 1px solid var(--admin-sidebar-border, #e8ecf1) !important;
box-shadow: var(--admin-sidebar-nav-shadow, none) !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-brand {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 48px !important;
padding: 6px 14px !important;
background: var(--admin-sidebar-bg) !important;
border-bottom: 1px solid var(--admin-sidebar-border) !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-left .brand {
display: none !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-left .admin-nav-toggle {
display: none !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-brand .admin-nav-toggle {
display: inline-flex !important;
width: 32px !important;
height: 32px !important;
min-height: 32px !important;
border-radius: 8px !important;
border: 1px solid var(--admin-sidebar-border) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
padding: 0 !important;
align-items: center !important;
justify-content: center !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-brand .admin-nav-toggle:hover {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
color: #ffffff !important;
}
body.admin-app:not(.admin-layout-sidebar) .admin-sidebar-brand .admin-nav-toggle {
display: none !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-brand .brand-logo {
height: 36px !important;
width: auto !important;
max-width: 170px !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-skin-scroll {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 8px 8px 12px !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-section-label {
padding: 8px 8px 5px !important;
margin: 2px 0 0 !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
color: var(--admin-sidebar-group-color) !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-details {
margin: 0 0 8px !important;
padding: 2px 0 !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-details summary,
body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf {
min-height: 32px !important;
padding: 6px 10px !important;
margin: 0 0 3px !important;
border-radius: 6px !important;
color: var(--admin-sidebar-text) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-details summary {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
list-style: none !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-details summary::-webkit-details-marker {
display: none !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-details[open] summary {
margin-bottom: 4px !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-details .admin-nav-sub {
min-height: 30px !important;
padding: 5px 10px !important;
margin: 0 0 3px !important;
border-radius: 6px !important;
color: var(--admin-sidebar-muted) !important;
font-size: 12px !important;
line-height: 1.2 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-leaf .icon,
body.admin-app.admin-layout-sidebar .admin-nav-sub .icon {
width: 16px !important;
height: 16px !important;
display: block !important;
flex-shrink: 0 !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-details summary:hover,
body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf:hover,
body.admin-app.admin-layout-sidebar .admin-nav-details .admin-nav-sub:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details .admin-nav-sub.active,
body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf.active {
background: var(--admin-sidebar-active) !important;
color: var(--admin-sidebar-active-text) !important;
box-shadow: inset -3px 0 0 var(--admin-sidebar-active-border) !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details .admin-nav-sub.active .icon,
body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf.active .icon,
body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details .admin-nav-sub.active .icon-nav,
body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf.active .icon-nav {
color: var(--admin-sidebar-active-text) !important;
opacity: 1 !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-footer {
margin-top: auto !important;
padding: 10px 8px 8px !important;
border-top: 1px solid var(--admin-sidebar-border) !important;
background: var(--admin-sidebar-bg) !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-user {
background: var(--admin-sidebar-user-bg) !important;
border: 1px solid var(--admin-sidebar-border) !important;
border-radius: 10px !important;
padding: 8px 9px !important;
gap: 9px !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-user-avatar {
width: 34px !important;
height: 34px !important;
font-size: 12px !important;
font-weight: 700 !important;
border: 1px solid var(--admin-sidebar-border) !important;
background: var(--admin-sidebar-user-avatar-bg) !important;
color: var(--admin-sidebar-user-avatar-fg) !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-user-text strong {
color: var(--admin-sidebar-user-strong) !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
body.admin-app.admin-layout-sidebar .admin-sidebar-user-text span {
color: var(--admin-sidebar-muted) !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
margin-top: 2px !important;
}
body.admin-app.admin-layout-sidebar header.admin-header {
position: fixed !important;
top: calc(var(--admin-trial-slot) + var(--admin-context-slot)) !important;
left: var(--admin-sidebar-width) !important;
right: 0 !important;
width: auto !important;
min-height: var(--admin-header-height) !important;
margin: 0 !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
background: #ffffff !important;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
pointer-events: auto !important;
z-index: 2400 !important;
}
html[data-theme="dark"] body.admin-app.admin-layout-sidebar header.admin-header,
[data-theme="dark"] body.admin-app.admin-layout-sidebar header.admin-header {
background: #0a0a0a !important;
border-bottom-color: var(--border) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* Keep top-right tools inside the header flow (avoid overlap/collision). */
body.admin-app.admin-layout-sidebar .admin-header-tools {
position: static !important;
top: auto !important;
right: auto !important;
z-index: auto !important;
pointer-events: auto !important;
display: inline-flex !important;
align-items: center !important;
margin-left: auto !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
body.admin-app.admin-layout-sidebar .admin-header-tools .admin-header-support-mail {
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
}
body.admin-app.admin-layout-sidebar .admin-header-tools .admin-header-support-mail:hover {
color: var(--ui-primary);
text-decoration: underline;
}
body.admin-app.admin-layout-sidebar .admin-header-tools .admin-header-view-as-form {
margin: 0;
}
body.admin-app.admin-layout-sidebar .admin-header-tools .admin-header-view-as-form .pre-view-select {
min-width: 160px;
max-width: 220px;
}
body.admin-app.admin-layout-sidebar .admin-profile-menu {
top: 100% !important;
right: 0 !important;
}
body.admin-app.admin-layout-sidebar .preheader.admin-context-strip {
z-index: 195 !important;
}
body.admin-app.admin-layout-sidebar .preheader.admin-context-strip .preheader-shell {
padding-left: 24px !important;
padding-right: 24px !important;
}
body.admin-app.admin-layout-sidebar main.container,
body.admin-app.admin-layout-sidebar main.container-full {
padding-left: 0 !important;
margin-left: var(--admin-sidebar-width) !important;
width: auto !important;
box-sizing: border-box !important;
margin-top: calc(var(--admin-trial-slot) + var(--admin-context-slot) + var(--admin-topbar-slot) + var(--admin-header-height)) !important;
}
body.admin-app.admin-layout-sidebar header.admin-header {
width: calc(100% - var(--admin-sidebar-width)) !important;
box-sizing: border-box !important;
}
/* Final guardrails: prevent heading/item overlap in sidebar nav */
body.admin-app.admin-layout-sidebar .admin-header .nav-links {
align-items: stretch !important;
gap: 0 !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links .admin-nav-section-label {
display: block !important;
width: 100% !important;
margin: 10px 8px 5px !important;
padding: 0 2px !important;
font-size: 9px !important;
line-height: 1.2 !important;
white-space: normal !important;
clear: both !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links .admin-nav-section-label:first-child {
margin-top: 6px !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details {
display: block !important;
width: 100% !important;
margin: 0 0 10px !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details summary {
margin: 0 0 4px !important;
white-space: normal !important;
overflow: visible !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details .admin-nav-sub {
width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 4px !important;
white-space: normal !important;
overflow: visible !important;
position: relative !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-leaf {
width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 6px !important;
white-space: normal !important;
overflow: visible !important;
}
body.admin-app.admin-layout-sidebar .preheader.admin-context-strip {
display: block !important;
background: var(--preheader-bg) !important;
border-bottom: 1px solid var(--preheader-border) !important;
box-shadow: none !important;
color: var(--preheader-text) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .preheader.admin-context-strip {
background: var(--preheader-bg) !important;
border-bottom-color: var(--preheader-border) !important;
color: var(--preheader-text) !important;
}
body.admin-app.admin-layout-sidebar .admin-header .header-shell,
body.admin-app.admin-layout-sidebar .admin-header nav {
background: transparent !important;
}
body.admin-app:not(.admin-layout-sidebar) .preheader.admin-context-strip {
display: block !important;
}
body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details {
overflow: visible !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-skin-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
body.admin-app.admin-layout-sidebar .admin-nav-skin-scroll::-webkit-scrollbar-track {
background: transparent;
}
body.admin-app.admin-layout-sidebar .admin-nav-skin-scroll::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, 0.2);
border-radius: 10px;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-nav-skin-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
}
/* Dark Mode specific overwrites for Admin Sidebar Layout */
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-header .nav-links {
background: transparent !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-nav-skin-open {
background: var(--admin-sidebar-bg) !important;
border-right-color: var(--admin-sidebar-border) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-sidebar-brand {
background: var(--admin-sidebar-bg) !important;
border-bottom-color: var(--admin-sidebar-border) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-nav-section-label {
color: var(--admin-sidebar-group-color) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-nav-details summary,
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf {
color: #ffffff !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-nav-details summary:hover,
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf:hover,
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-nav-details .admin-nav-sub:hover {
background: var(--admin-sidebar-hover) !important;
color: #ffffff !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details .admin-nav-sub.active,
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf.active {
background: rgba(255, 255, 255, 0.14) !important;
color: #ffffff !important;
box-shadow: inset 3px 0 0 #60a5fa !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-nav-details .admin-nav-sub {
color: rgba(255, 255, 255, 0.85) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-sidebar-footer {
background: var(--admin-sidebar-bg) !important;
border-top-color: var(--admin-sidebar-border) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-sidebar-brand .admin-nav-toggle {
background: rgba(255, 255, 255, 0.1) !important;
border-color: var(--admin-sidebar-border) !important;
color: #ffffff !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-sidebar-brand .admin-nav-toggle:hover {
background: rgba(255, 255, 255, 0.16) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-sidebar-user {
background: var(--admin-sidebar-user-bg) !important;
border-color: var(--admin-sidebar-border) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-sidebar-user-text strong {
color: #ffffff !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-sidebar-user-text span {
color: rgba(255, 255, 255, 0.72) !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar {
background: var(--page-bg) !important;
}
/* Final admin top chrome alignment guards */
body.admin-app .preheader.admin-context-strip {
display: block !important;
visibility: visible !important;
}
body.admin-app:not(.admin-layout-sidebar) .preheader.admin-context-strip {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: var(--admin-trial-slot, 0px) !important;
z-index: 195 !important;
}
body.admin-app:not(.admin-layout-sidebar) header.admin-header {
top: calc(var(--admin-trial-slot, 0px) + var(--admin-context-slot, var(--admin-preheader-height))) !important;
z-index: 3000 !important;
}
body.admin-app:not(.admin-layout-sidebar) main.container,
body.admin-app:not(.admin-layout-sidebar) main.container-full {
margin-top: calc(var(--admin-trial-slot, 0px) + var(--admin-context-slot, var(--admin-preheader-height)) + var(--admin-header-height)) !important;
}
body.admin-app .admin-header .header-shell {
padding-left: 18px !important;
padding-right: 18px !important;
}
body.admin-app .admin-header nav {
align-items: center !important;
gap: 16px !important;
}
body.admin-app .admin-topbar-menu {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-left: 2px !important;
min-width: 0 !important;
overflow-x: auto !important;
}
@media (max-width: 768px) {
body.admin-app.admin-layout-sidebar .admin-header .nav-links {
display: none !important;
}
body.admin-app.admin-layout-sidebar .preheader.preheader-trial,
body.admin-app.admin-layout-sidebar .preheader.admin-context-strip,
body.admin-app.admin-layout-sidebar header.admin-header {
margin-left: 0 !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
}
body.admin-app.admin-layout-sidebar main.container,
body.admin-app.admin-layout-sidebar main.container-full {
margin-left: 0 !important;
width: 100% !important;
padding-left: 0 !important;
}
}
/* Authoritative fallback: shift entire admin canvas in sidebar mode */
body.admin-app.admin-layout-sidebar {
padding-left: 0 !important;
box-sizing: border-box !important;
background: var(--page-bg, #f8fafc) !important;
}
body.admin-app.admin-layout-sidebar .preheader.preheader-trial,
body.admin-app.admin-layout-sidebar .preheader.admin-context-strip,
body.admin-app.admin-layout-sidebar header.admin-header {
margin-left: 0 !important;
width: auto !important;
}
body.admin-app.admin-layout-sidebar .preheader.preheader-trial,
body.admin-app.admin-layout-sidebar .preheader.admin-context-strip {
left: var(--admin-sidebar-width) !important;
right: 0 !important;
width: calc(100% - var(--admin-sidebar-width)) !important;
}
body.admin-app.admin-layout-sidebar main.container,
body.admin-app.admin-layout-sidebar main.container-full {
margin-left: var(--admin-sidebar-width) !important;
width: auto !important;
padding-left: 12px !important;
padding-right: 20px !important;
margin-top: calc(var(--admin-trial-slot) + var(--admin-context-slot) + var(--admin-topbar-slot) + var(--admin-header-height)) !important;
overflow-x: auto !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* Wide data tables scroll inside the main column instead of clipping */
body.admin-app .admin-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* Shared admin data-table look (Petty Cash, CBA, Interviews, Reports, etc.) */
body.admin-app .admin-table-wrap,
body.admin-app .pc-table-wrap,
body.admin-app .cba-table-wrap,
body.admin-app .iv-table-wrap,
body.admin-app .fleet-table-wrap,
body.admin-app .emp-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100%;
min-width: 0;
border: 1px solid var(--border, #cbd5e1);
border-radius: 10px;
background: var(--card, #fff);
box-sizing: border-box;
}
body.admin-app .pc-table-panel .pc-table-wrap {
border: none;
border-radius: 0;
}
body.admin-app .pc-table,
body.admin-app .cba-table,
body.admin-app .iv-table,
body.admin-app .reports-table,
body.admin-app .admin-table-wrap > table,
body.admin-app .fleet-table-wrap > table,
body.admin-app .emp-table-wrap > table {
width: 100%;
border-collapse: collapse;
background: var(--card, #fff);
}
body.admin-app .pc-table th,
body.admin-app .pc-table td,
body.admin-app .cba-table th,
body.admin-app .cba-table td,
body.admin-app .iv-table th,
body.admin-app .iv-table td,
body.admin-app .reports-table th,
body.admin-app .reports-table td,
body.admin-app .admin-table-wrap > table th,
body.admin-app .admin-table-wrap > table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border, #e2e8f0);
text-align: left;
vertical-align: middle;
font-size: 12px;
color: var(--text, #0f172a);
}
body.admin-app .pc-table thead th,
body.admin-app .cba-table thead th,
body.admin-app .iv-table thead th,
body.admin-app .reports-table thead th,
body.admin-app .admin-table-wrap > table thead th {
background: #f8fafc;
color: #64748b;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
vertical-align: bottom;
}
body.admin-app .pc-table tbody tr:last-child td,
body.admin-app .cba-table tbody tr:last-child td,
body.admin-app .iv-table tbody tr:last-child td,
body.admin-app .reports-table tbody tr:last-child td,
body.admin-app .admin-table-wrap > table tbody tr:last-child td {
border-bottom: none;
}
body.admin-app .pc-table tbody tr:hover,
body.admin-app .cba-table tbody tr:hover,
body.admin-app .iv-table tbody tr:hover {
background: #f8fafc;
}
body.admin-app .pc-table .pc-num,
body.admin-app .cba-table .cba-num,
body.admin-app .cba-table--slabs td:not(:first-child),
body.admin-app .cba-table--slabs th:not(:first-child) {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-weight: 500;
}
body.admin-app .cba-table--slabs td:first-child,
body.admin-app .cba-table--slabs td:first-child strong,
body.admin-app .cba-table--slabs td:last-child,
body.admin-app .cba-table--slabs td:last-child strong {
font-weight: 600;
}
body.admin-app .pc-actions-inline,
body.admin-app .iv-actions-inline,
body.admin-app .admin-row-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
body.admin-app .pc-actions-inline .pc-btn,
body.admin-app .admin-row-actions > a,
body.admin-app .admin-row-actions > button {
min-height: 30px;
padding: 0 10px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
line-height: 1;
box-sizing: border-box;
}
html[data-theme="dark"] body.admin-app .pc-table thead th,
html[data-theme="dark"] body.admin-app .cba-table thead th,
html[data-theme="dark"] body.admin-app .iv-table thead th,
html[data-theme="dark"] body.admin-app .reports-table thead th,
html[data-theme="dark"] body.admin-app .admin-table-wrap > table thead th {
background: var(--table-header-bg, #0f172a);
color: var(--muted, #94a3b8);
}
html[data-theme="dark"] body.admin-app .pc-table tbody tr:hover,
html[data-theme="dark"] body.admin-app .cba-table tbody tr:hover,
html[data-theme="dark"] body.admin-app .iv-table tbody tr:hover {
background: rgba(148, 163, 184, 0.08);
}
/* Theme bridge — sidebar/brand color drives buttons, soft boxes, avatars */
body.admin-app .pc-btn:not(.pc-btn-light),
body.admin-app .pc-btn-primary,
body.admin-app .cp-btn.primary,
body.admin-app a.cal-action-btn.primary,
body.admin-app .iv-open-create,
body.admin-app .btn-primary,
body.admin-app button.btn-primary,
body.admin-app .pa-btn-primary,
body.admin-app .lc-btn-primary {
background: var(--ui-primary) !important;
border-color: var(--ui-primary) !important;
color: #fff !important;
}
body.admin-app .pc-btn:not(.pc-btn-light):hover,
body.admin-app .pc-btn-primary:hover,
body.admin-app .cp-btn.primary:hover,
body.admin-app a.cal-action-btn.primary:hover,
body.admin-app .iv-open-create:hover,
body.admin-app .btn-primary:hover,
body.admin-app button.btn-primary:hover,
body.admin-app .pa-btn-primary:hover,
body.admin-app .lc-btn-primary:hover {
background: var(--ui-primary-hover) !important;
border-color: var(--ui-primary-hover) !important;
}
body.admin-app .pc-kpi,
body.admin-app .grp-kpi,
body.admin-app .lc-kpi,
body.admin-app .cp-metric,
body.admin-app .cp-stat,
body.admin-app .pa-kpi,
body.admin-app .cal-kpi {
background: var(--brand-soft, var(--card, #fff));
border-color: var(--brand-soft-border, var(--border, #e2e8f0));
}
body.admin-app .crew-avatar-initials,
body.crew-app .crew-avatar-initials {
background: var(--ui-primary) !important;
}
body.crew-app .crew-dash-nav a.active {
background: var(--ui-primary) !important;
color: #fff !important;
}
body.crew-app .crew-dash-logo-mark {
background: linear-gradient(135deg, var(--ui-primary-hover) 0%, var(--ui-primary) 100%) !important;
}
body.admin-app.admin-layout-sidebar main.container > .admin-travel,
body.admin-app.admin-layout-sidebar main.container-full > .admin-travel,
body.admin-app.admin-layout-sidebar main.container > .admin-tickets,
body.admin-app.admin-layout-sidebar main.container-full > .admin-tickets,
body.admin-app.admin-layout-sidebar main.container > .admin-reports,
body.admin-app.admin-layout-sidebar main.container-full > .admin-reports {
min-width: 0;
max-width: 100%;
}
/* Apply petty-cash style safe gutter to common page wrappers across admin screens */
body.admin-app.admin-layout-sidebar main.container > [class$="-page"],
body.admin-app.admin-layout-sidebar main.container > [class$="-wrap"],
body.admin-app.admin-layout-sidebar main.container > [class$="-shell"],
body.admin-app.admin-layout-sidebar main.container-full > [class$="-page"],
body.admin-app.admin-layout-sidebar main.container-full > [class$="-wrap"],
body.admin-app.admin-layout-sidebar main.container-full > [class$="-shell"],
body.admin-app.admin-layout-sidebar main.container > .admin-report,
body.admin-app.admin-layout-sidebar main.container > .admin-ticket,
body.admin-app.admin-layout-sidebar main.container > .admin-tickets,
body.admin-app.admin-layout-sidebar main.container > .admin-reports,
body.admin-app.admin-layout-sidebar main.container-full > .admin-report,
body.admin-app.admin-layout-sidebar main.container-full > .admin-ticket,
body.admin-app.admin-layout-sidebar main.container-full > .admin-tickets,
body.admin-app.admin-layout-sidebar main.container-full > .admin-reports,
body.admin-app.admin-layout-sidebar main.container > .cal-shell,
body.admin-app.admin-layout-sidebar main.container-full > .cal-shell {
margin-left: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-top: 6px !important;
padding-bottom: 10px !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
body.admin-app.admin-layout-sidebar {
padding-left: 0 !important;
}
body.admin-app.admin-layout-sidebar .preheader.preheader-trial,
body.admin-app.admin-layout-sidebar .preheader.admin-context-strip,
body.admin-app.admin-layout-sidebar header.admin-header {
left: 0 !important;
width: 100% !important;
}
}
/* Sidebar company admin: no redundant context strip (header already shows company/tools) */
body.admin-app.admin-layout-sidebar:not(.agency-manning-app) .preheader.admin-context-strip {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
pointer-events: none !important;
}
/* Main content viewport — flat on page bg (no chrome box) */
body.admin-app main.container,
body.admin-app main.container-full {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Shared overflow hygiene for admin content cards / kv grids (not matrix tables) */
body.admin-app main .card,
body.admin-app main [class$="-card"],
body.admin-app main [class*="-card "],
body.admin-app main [class*="-mini"],
body.admin-app main [class*="-note"] {
min-width: 0;
max-width: 100%;
}
body.admin-app main dl dd,
body.admin-app main [class*="-note"] p,
body.admin-app main [class*="-kv"] strong,
body.admin-app main [class*="-kv"] > div,
body.admin-app main [class*="-agent"],
body.admin-app main [class*="-mini"] {
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
body.admin-app main [class*="-kv"] > div,
body.admin-app main [class*="-list"] > *,
body.admin-app main [class*="-grid"] > * {
min-width: 0;
}
body.admin-app main.container > [class$="-filter-panel"],
body.admin-app main.container-full > [class$="-filter-panel"],
body.admin-app main [class*="-filter-panel"]:not(.admin-topbar-panel):not(.admin-topnav-panel) {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* — Manning agency: fixed top bar + fixed left rail; main & brand offset (same pattern as company admin). — */
body.agency-manning-app.admin-layout-sidebar {
--agency-rail-width: 220px;
/* Height reserved for trial strip + agency preheader (fixed); tune if preheader wraps */
--agency-chrome-stack: calc(var(--admin-trial-slot, 0px) + max(44px, var(--admin-preheader-height)));
background: #ffffff !important;
}
[data-theme="dark"].agency-manning-app.admin-layout-sidebar {
background: #0f172a !important;
}
body.agency-manning-app .preheader.agency-preheader {
position: fixed !important;
top: var(--admin-trial-slot, 0px) !important;
left: 0 !important;
right: 0 !important;
z-index: 103 !important;
margin: 0 !important;
background: #ffffff !important;
border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme="dark"].agency-manning-app .preheader.agency-preheader {
background: #0f172a !important;
border-bottom-color: #1e293b !important;
}
body.agency-manning-app.admin-nav-open .preheader,
body.agency-manning-app.admin-nav-open .preheader.preheader-trial {
padding-left: 24px !important;
padding-right: 24px !important;
margin: 0 !important;
}
body.agency-manning-app .agency-preheader .preheader-shell {
min-height: 40px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
flex-wrap: wrap !important;
row-gap: 6px !important;
}
@media (max-width: 640px) {
/* Keep the fixed strip to a single row so it can't eat the viewport. */
body.agency-manning-app .agency-preheader .preheader-shell {
flex-wrap: nowrap !important;
gap: 8px !important;
}
body.agency-manning-app .agency-preheader .pre-left {
min-width: 0;
overflow: hidden;
}
body.agency-manning-app .agency-preheader .pre-left .pre-meta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.agency-manning-app .agency-preheader .pre-right {
flex: 0 0 auto;
}
}
body.agency-manning-app .agency-preheader .theme-toggle {
width: 34px !important;
height: 34px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #dbe4ee !important;
border-radius: 10px !important;
background: #ffffff !important;
color: #334155 !important;
box-shadow: none !important;
opacity: 1 !important;
filter: none !important;
}
body.agency-manning-app .agency-preheader .theme-toggle:hover {
background: #f8fafc !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
opacity: 1 !important;
filter: none !important;
}
body.agency-manning-app .agency-preheader .theme-toggle svg {
display: block;
flex-shrink: 0;
}
body.agency-manning-app .agency-preheader .theme-toggle .theme-ic-sun {
display: block !important;
}
body.agency-manning-app .agency-preheader .theme-toggle .theme-ic-moon {
display: none !important;
}
[data-theme="dark"].agency-manning-app .agency-preheader .theme-toggle {
background: #111827 !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme="dark"].agency-manning-app .agency-preheader .theme-toggle:hover {
background: #1e293b !important;
border-color: #475569 !important;
color: #ffffff !important;
}
body.agency-manning-app .agency-pre-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 6px;
background: rgba(15, 23, 42, 0.06);
border: 1px solid rgba(15, 23, 42, 0.1);
}
[data-theme="dark"].agency-manning-app .agency-pre-code {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
}
body.agency-manning-app .agency-manning-rail {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
position: fixed !important;
left: 0 !important;
right: auto !important;
top: var(--agency-chrome-stack) !important;
bottom: 0 !important;
width: var(--agency-rail-width) !important;
min-width: var(--agency-rail-width) !important;
max-width: var(--agency-rail-width) !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
padding: 12px 0 18px !important;
gap: 0 !important;
margin: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
z-index: 200 !important;
background: #0f2747 !important;
border-right: 1px solid rgba(148, 163, 184, 0.25) !important;
box-shadow: none !important;
pointer-events: auto !important;
}
body.agency-manning-app .agency-manning-rail-brand {
flex: 0 0 auto !important;
padding: 8px 14px 16px !important;
margin: 0 !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
box-sizing: border-box !important;
}
body.agency-manning-app .agency-manning-rail-brand-link {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-decoration: none !important;
}
body.agency-manning-app .agency-manning-rail-brand-link .brand-logo {
height: 32px !important;
width: auto !important;
max-width: 100% !important;
display: block !important;
}
[data-theme="dark"].agency-manning-app .agency-manning-rail {
background: #0f2747 !important;
border-right-color: #334155 !important;
box-shadow: none !important;
}
[data-theme="dark"].agency-manning-app .agency-manning-rail-brand {
border-bottom-color: #334155 !important;
}
[data-theme="dark"].agency-manning-app .agency-manning-rail-brand-link .brand-logo { filter: none !important; }
body.agency-manning-app .agency-nav-groups {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
gap: 2px !important;
padding: 12px 0 0 !important;
min-height: 0 !important;
}
body.agency-manning-app .agency-nav-group {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
padding: 0 0 10px !important;
}
body.agency-manning-app .agency-nav-group + .agency-nav-group {
margin-top: 8px !important;
}
body.agency-manning-app .agency-nav-group-label {
display: block !important;
padding: 0 18px 8px !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: rgba(148, 163, 184, 0.74) !important;
}
body.agency-manning-app .agency-nav-group-links {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link {
border-radius: 12px !important;
margin: 0 12px !important;
width: calc(100% - 24px) !important;
box-sizing: border-box !important;
padding: 11px 14px !important;
font-size: 15px !important;
font-weight: 500 !important;
color: #d9e3f2 !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
line-height: 1.25 !important;
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link .icon {
color: #a7b6cc;
opacity: 1 !important;
flex-shrink: 0 !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link:hover {
background: rgba(32, 86, 132, 0.34) !important;
color: #ffffff !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link:hover .icon {
color: #dbeafe !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link.active {
background: rgba(14, 60, 99, 0.95) !important;
color: #27c3f3 !important;
font-weight: 600 !important;
box-shadow: inset 3px 0 0 #27c3f3 !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link.active .icon {
color: #27c3f3 !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link--muted {
color: #cbd5e1 !important;
margin-top: auto !important;
margin-left: 12px !important;
margin-right: 12px !important;
width: calc(100% - 24px) !important;
border-top: 1px solid rgba(148, 163, 184, 0.25) !important;
border-radius: 0 !important;
padding: 14px 14px 0 !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link--muted .icon {
color: #94a3b8 !important;
}
body.agency-manning-app .agency-manning-rail a.agency-nav-link--muted:hover {
background: transparent !important;
color: #ffffff !important;
}
[data-theme="dark"].agency-manning-app .agency-manning-rail a.agency-nav-link .icon {
color: #a7b6cc !important;
}
[data-theme="dark"].agency-manning-app .agency-manning-rail a.agency-nav-link:hover {
background: rgba(32, 86, 132, 0.34) !important;
color: #f8fafc !important;
}
[data-theme="dark"].agency-manning-app .agency-manning-rail a.agency-nav-link.active {
background: rgba(14, 60, 99, 0.95) !important;
color: #27c3f3 !important;
box-shadow: inset 3px 0 0 #27c3f3 !important;
}
[data-theme="dark"].agency-manning-app .agency-manning-rail a.agency-nav-link.active .icon {
color: #27c3f3 !important;
}
[data-theme="dark"].agency-manning-app .agency-manning-rail a.agency-nav-link--muted {
color: var(--admin-sidebar-muted);
border-top-color: #1e293b !important;
}
[data-theme="dark"].agency-manning-app .agency-nav-group-label {
color: rgba(148, 163, 184, 0.74) !important;
}
body.agency-manning-app.admin-layout-sidebar main.container-full,
body.agency-manning-app.admin-layout-sidebar main.container:not(.container-full) {
position: relative !important;
z-index: 1 !important;
margin-left: var(--agency-rail-width) !important;
margin-top: var(--agency-chrome-stack) !important;
margin-right: 0 !important;
width: calc(100% - var(--agency-rail-width)) !important;
max-width: none !important;
padding-top: 8px !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 40px !important;
box-sizing: border-box !important;
background: #ffffff !important;
}
[data-theme="dark"].agency-manning-app.admin-layout-sidebar main.container-full,
[data-theme="dark"].agency-manning-app.admin-layout-sidebar main.container:not(.container-full) {
background: transparent !important;
}
/* — Manning agency: narrow screens — rail becomes an off-canvas drawer so content gets the full width. — */
body.agency-manning-app .agency-rail-fab,
body.agency-manning-app .agency-rail-scrim {
display: none;
}
@media (max-width: 860px) {
body.agency-manning-app .agency-manning-rail {
width: 248px !important;
min-width: 248px !important;
max-width: 248px !important;
transform: translateX(-100%);
transition: transform .22s ease;
box-shadow: 0 18px 48px rgba(15, 23, 42, .3) !important;
}
body.agency-manning-app.agency-rail-open .agency-manning-rail {
transform: translateX(0);
}
body.agency-manning-app.admin-layout-sidebar main.container-full,
body.agency-manning-app.admin-layout-sidebar main.container:not(.container-full) {
margin-left: 0 !important;
width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
body.agency-manning-app .agency-rail-fab {
display: inline-flex !important;
position: fixed;
left: 12px;
bottom: 14px;
z-index: 260;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #0f2747;
box-shadow: 0 10px 26px rgba(15, 23, 42, .22);
cursor: pointer;
padding: 0;
}
body.agency-manning-app .agency-rail-fab svg {
width: 22px;
height: 22px;
}
body.agency-manning-app.agency-rail-open .agency-rail-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 199;
background: rgba(15, 23, 42, .45);
border: 0;
padding: 0;
}
}
[data-theme="dark"].agency-manning-app .agency-rail-fab {
background: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
/* FINAL NAV MODE FIX: in sidebar layout use topbar dropdown menu (not flat link strip). */
body.admin-app.admin-layout-sidebar .admin-header .admin-nav-skin-closed {
display: none !important;
}
body.admin-app.admin-layout-sidebar .admin-header .admin-topbar-menu {
display: flex !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
height: auto !important;
width: auto !important;
padding: 0 6px !important;
margin-left: 12px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
z-index: 2600 !important;
}
body.admin-app.admin-layout-sidebar .admin-header .admin-topbar-dropdown {
position: relative !important;
z-index: 2601 !important;
}
body.admin-app.admin-layout-sidebar .admin-header .admin-topbar-panel {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
min-width: 220px !important;
background: #fff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22) !important;
z-index: 2700 !important;
}
[data-theme="dark"].admin-app.admin-layout-sidebar .admin-header .admin-topbar-panel {
background: #0f172a !important;
border-color: #334155 !important;
}
/* ===================================================================
AUTHORITATIVE TOP NAV (v2) — native / dropdown.
Uses dedicated class names so no legacy rules can fight it.
=================================================================== */
.admin-topnav-v2 {
display: flex !important;
align-items: center !important;
gap: 4px !important;
flex-wrap: wrap !important;
overflow: visible !important;
}
.admin-topnav-item {
position: relative !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.admin-topnav-item > summary::-webkit-details-marker { display: none !important; }
.admin-topnav-item > summary { list-style: none !important; }
.admin-topnav-summary {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
height: 36px !important;
padding: 0 12px !important;
border-radius: 8px !important;
cursor: pointer !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #334155 !important;
background: transparent !important;
white-space: nowrap !important;
user-select: none !important;
}
[data-theme="dark"] .admin-topnav-summary { color: #e2e8f0 !important; }
.admin-topnav-summary:hover { background: #f1f5f9 !important; color: #0f172a !important; }
[data-theme="dark"] .admin-topnav-summary:hover { background: #1e293b !important; color: #f8fafc !important; }
.admin-topnav-summary.active { background: #eff6ff !important; color: #1d4ed8 !important; }
[data-theme="dark"] .admin-topnav-summary.active { background: rgba(59,130,246,0.18) !important; color: #bfdbfe !important; }
.admin-topnav-caret {
width: 14px !important;
height: 14px !important;
transition: transform .18s ease !important;
opacity: .8 !important;
}
.admin-topnav-item[open] > .admin-topnav-summary .admin-topnav-caret { transform: rotate(180deg) !important; }
.admin-topnav-panel {
position: absolute !important;
top: calc(100% + 6px) !important;
left: 0 !important;
min-width: 240px !important;
max-width: 360px !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 10px !important;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22) !important;
z-index: 99999 !important;
display: grid !important;
gap: 2px !important;
}
[data-theme="dark"] .admin-topnav-panel {
background: #0f172a !important;
border-color: #334155 !important;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5) !important;
}
.admin-topnav-link {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 9px 12px !important;
border-radius: 6px !important;
color: #0f172a !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
text-decoration: none !important;
background: transparent !important;
white-space: nowrap !important;
}
[data-theme="dark"] .admin-topnav-link { color: #e2e8f0 !important; }
.admin-topnav-link:hover { background: #eff6ff !important; color: #1d4ed8 !important; }
[data-theme="dark"] .admin-topnav-link:hover { background: #1e293b !important; color: #f8fafc !important; }
.admin-topnav-link.active { background: #dbeafe !important; color: #1d4ed8 !important; }
[data-theme="dark"] .admin-topnav-link.active { background: rgba(59,130,246,0.24) !important; color: #bfdbfe !important; }
/* Ensure header chain doesn't clip dropdowns */
header.admin-header,
header.admin-header .header-shell,
header.admin-header nav,
header.admin-header .admin-topbar-menu,
header.admin-header .admin-topnav-v2,
header.admin-header .admin-topnav-item { overflow: visible !important; }
/* Hide the top horizontal nav when the sidebar layout is active —
the sidebar already exposes the same modules. */
body.admin-app.admin-layout-sidebar .admin-topnav-v2,
body.admin-app.admin-layout-sidebar header.admin-header .admin-topnav-v2,
body.admin-app.admin-layout-sidebar #admin-header-menu {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
@media (max-width: 760px) {
.admin-topnav-panel { min-width: 200px !important; }
.admin-topnav-summary { height: 32px !important; padding: 0 10px !important; font-size: 12px !important; }
}
/* Sidebar: keep a fixed-height rail and scroll long nav lists (do not clip lower sections). */
body.admin-app.admin-layout-sidebar .admin-header .nav-links {
height: 100vh !important;
max-height: 100vh !important;
min-height: 0 !important;
overflow: hidden !important;
}
body.admin-app.admin-layout-sidebar .admin-nav-skin-scroll {
flex: 1 1 0% !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important;
}
body.admin-app.admin-layout-sidebar main.container,
body.admin-app.admin-layout-sidebar main.container-full {
min-height: calc(100vh - var(--admin-header-height)) !important;
}
/* Crew planning + Our Crew list — dark theme */
[data-theme="dark"] .cp-shell { background: var(--page-bg); }
[data-theme="dark"] .cp-topbar,
[data-theme="dark"] .cp-stat,
[data-theme="dark"] .cp-vcard,
[data-theme="dark"] .cp-content,
[data-theme="dark"] .cp-modal {
background: var(--card);
border-color: var(--border);
box-shadow: var(--shadow-soft);
}
[data-theme="dark"] .cp-topbar h1,
[data-theme="dark"] .cp-vcard h3,
[data-theme="dark"] .cp-modal-head h2,
[data-theme="dark"] .cp-crew-badge strong { color: var(--text); }
[data-theme="dark"] .cp-meta,
[data-theme="dark"] .cp-stat span,
[data-theme="dark"] .cp-grid-head,
[data-theme="dark"] .cp-vcard-foot,
[data-theme="dark"] .cp-modal-sub,
[data-theme="dark"] .cp-modal-foot span { color: var(--muted); }
[data-theme="dark"] .cp-tab,
[data-theme="dark"] .cp-btn {
background: var(--card-strong);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .cp-tab.is-active,
[data-theme="dark"] .cp-btn.primary { background: var(--ui-primary); border-color: var(--ui-primary-hover); color: #fff; }
[data-theme="dark"] .cp-btn:hover { background: var(--accent-light); }
[data-theme="dark"] .cp-rank-pill { background: var(--kbd-bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .cp-crew-badge { background: var(--surface); border-color: rgba(248, 113, 113, 0.45); }
[data-theme="dark"] .cp-progress { background: var(--border); }
[data-theme="dark"] .cp-vcard-foot { border-top-color: var(--border); }
[data-theme="dark"] .cp-alert { background: rgba(127, 29, 29, 0.35); border-color: rgba(248, 113, 113, 0.35); color: #fecaca; }
[data-theme="dark"] .cp-alert a { color: #fca5a5; }
[data-theme="dark"] .cp-bucket.lt30 { background: rgba(127, 29, 29, 0.35); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
[data-theme="dark"] .cp-bucket.d31_60 { background: rgba(124, 45, 18, 0.35); color: #fdba74; border-color: rgba(251, 146, 60, 0.35); }
[data-theme="dark"] .cp-bucket.d61_90 { background: rgba(113, 63, 18, 0.35); color: #fde047; border-color: rgba(250, 204, 21, 0.35); }
[data-theme="dark"] .cp-modal-overlay { background: rgba(0, 0, 0, 0.72); }
[data-theme="dark"] .cp-modal-head,
[data-theme="dark"] .cp-modal-foot { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .cp-modal-table thead th { background: var(--table-header-bg); color: var(--muted); }
[data-theme="dark"] .cp-modal-table th,
[data-theme="dark"] .cp-modal-table td { color: var(--text); border-bottom-color: var(--border); }
[data-theme="dark"] .cp-modal-table tbody tr:hover td { background: var(--table-row-hover); }
[data-theme="dark"] .cp-modal-close { background: var(--card-strong); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .cp-days-badge.urgent { background: rgba(127, 29, 29, 0.4); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
[data-theme="dark"] .cp-days-badge.warn { background: rgba(124, 45, 18, 0.4); color: #fdba74; border-color: rgba(251, 146, 60, 0.35); }
[data-theme="dark"] .cp-days-badge.caution { background: rgba(113, 63, 18, 0.4); color: #fde047; border-color: rgba(250, 204, 21, 0.35); }
[data-theme="dark"] .cp-days-badge.ok { background: rgba(20, 83, 45, 0.4); color: #86efac; border-color: rgba(74, 222, 128, 0.35); }
[data-theme="dark"] .cp-days-badge.muted { background: var(--kbd-bg); color: var(--muted); border-color: var(--border); }
/* Our Crew (employees) — dark theme */
[data-theme="dark"] .emp-card,
[data-theme="dark"] .emp-table td,
[data-theme="dark"] .emp-inline-edit-grid input,
[data-theme="dark"] .emp-inline-edit-grid select,
[data-theme="dark"] .emp-col-panel,
[data-theme="dark"] .emp-tags-dialog-inner {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] .emp-table thead th { background: var(--table-header-bg); color: var(--muted); }
[data-theme="dark"] .emp-table th,
[data-theme="dark"] .emp-table td { border-bottom-color: var(--border); }
[data-theme="dark"] .emp-table tbody tr:hover td { background: var(--table-row-hover); }
[data-theme="dark"] .emp-row-white td,
[data-theme="dark"] .emp-row-ashore td { background: var(--card) !important; }
[data-theme="dark"] .emp-filters input,
[data-theme="dark"] .emp-filters select,
[data-theme="dark"] .emp-filters-more {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .emp-btn.ghost,
[data-theme="dark"] .emp-col-btn,
[data-theme="dark"] .emp-toolbar-tags-btn,
[data-theme="dark"] .emp-btn-outline {
background: var(--card-strong);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .emp-view-tabs {
background: var(--card);
border-color: var(--border);
}
[data-theme="dark"] .emp-view-tab {
background: transparent;
border-color: var(--border);
color: var(--muted);
}
[data-theme="dark"] .emp-view-tab:hover {
background: var(--card-strong, rgba(255, 255, 255, 0.04));
color: var(--text);
}
[data-theme="dark"] .emp-view-tab.active {
background: rgba(37, 99, 235, 0.18);
color: var(--ui-primary);
border-bottom: none;
}
[data-theme="dark"] .emp-filters-panel,
[data-theme="dark"] .emp-table-panel,
[data-theme="dark"] .emp-dropdown-menu {
background: transparent;
border-color: transparent;
}
[data-theme="dark"] .emp-head h1,
[data-theme="dark"] .emp-sub { color: var(--text); }
[data-theme="dark"] .emp-sub { color: var(--muted); }
[data-theme="dark"] .emp-inline-edit-cell { background: var(--card-strong); }
/* Global admin dark mode — shared surfaces, forms, calendars */
[data-theme="dark"] body.admin-app main.container,
[data-theme="dark"] body.admin-app main.container-full {
background: var(--page-bg) !important;
color: var(--text);
}
[data-theme="dark"] body.admin-app input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] body.admin-app select,
[data-theme="dark"] body.admin-app textarea {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] body.admin-app h1,
[data-theme="dark"] body.admin-app h2,
[data-theme="dark"] body.admin-app h3,
[data-theme="dark"] body.admin-app h4 {
color: var(--text);
}
[data-theme="dark"] button[aria-label*="Close" i],
[data-theme="dark"] button[class*="modal-close"],
[data-theme="dark"] button[class*="drawer-close"],
[data-theme="dark"] button[class*="-close-x"],
[data-theme="dark"] button.close-btn,
[data-theme="dark"] button.close-x,
[data-theme="dark"] button.bpd-close {
color: var(--muted);
}
[data-theme="dark"] button[aria-label*="Close" i]:hover,
[data-theme="dark"] button[class*="modal-close"]:hover,
[data-theme="dark"] button[class*="drawer-close"]:hover,
[data-theme="dark"] button[class*="-close-x"]:hover,
[data-theme="dark"] button.close-btn:hover,
[data-theme="dark"] button.close-x:hover,
[data-theme="dark"] button.bpd-close:hover {
background: var(--accent-light);
color: var(--text);
}
/* Sign-off / expiry calendar */
[data-theme="dark"] .cal-nav-btn,
[data-theme="dark"] .cal-today-btn,
[data-theme="dark"] .cal-filter-select,
[data-theme="dark"] .cal-view-tab:not(.active),
[data-theme="dark"] .cal-month-chip,
[data-theme="dark"] .cal-grid-wrap,
[data-theme="dark"] .cal-day:not(.outside-month):not(.is-selected),
[data-theme="dark"] .cal-detail-card,
[data-theme="dark"] .cal-detail-head,
[data-theme="dark"] .cal-empty,
[data-theme="dark"] .cal-day-summary-row,
[data-theme="dark"] .cal-event-chip:not(.sign-on):not(.sign-off):not(.sign-mixed):not(.more) {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] .cal-day.outside-month { background: var(--empty-state-bg); color: var(--muted); }
[data-theme="dark"] .cal-day.is-selected { background: var(--accent-light); }
[data-theme="dark"] .cal-month-chip.active { background: var(--accent-light); border-color: var(--ui-primary); }
[data-theme="dark"] .cal-month-chip.month-tone-0 { background: var(--kbd-bg); border-left-color: var(--muted); }
[data-theme="dark"] .cal-month-chip.month-tone-1 { background: rgba(37, 99, 235, 0.15); border-left-color: #60a5fa; }
[data-theme="dark"] .cal-month-chip.month-tone-2 { background: rgba(124, 58, 237, 0.15); border-left-color: #a78bfa; }
[data-theme="dark"] .cal-month-chip.month-tone-3 { background: rgba(8, 145, 178, 0.15); border-left-color: #22d3ee; }
[data-theme="dark"] .cal-events-table thead th { background: var(--table-header-bg); color: var(--muted); }
[data-theme="dark"] .cal-events-table tbody td { color: var(--text); border-bottom-color: var(--border); }
[data-theme="dark"] .cal-event-detail-row td { background: var(--surface); }
[data-theme="dark"] .cal-event-chip.sign-on { background: rgba(20, 83, 45, 0.35); color: #86efac; border-left-color: #22c55e; }
[data-theme="dark"] .cal-event-chip.sign-off { background: rgba(127, 29, 29, 0.35); color: #fca5a5; border-left-color: #ef4444; }
[data-theme="dark"] .cal-event-chip.sign-mixed { background: rgba(13, 148, 136, 0.25); color: #5eead4; border-left-color: #14b8a6; }
[data-theme="dark"] .cal-event-chip.more { background: var(--kbd-bg); color: var(--muted); }
[data-theme="dark"] .inactive-candidate-item { background: var(--empty-state-bg); border-color: var(--border); }
/* Leave calendar */
[data-theme="dark"] .lc-toolbar,
[data-theme="dark"] .lc-panel,
[data-theme="dark"] .lc-panel-head,
[data-theme="dark"] .lc-cal td,
[data-theme="dark"] .lc-panel-head .lc-nav a {
background: var(--card);
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] .lc-kpi--violet { background: linear-gradient(145deg, rgba(124, 58, 237, 0.18) 0%, var(--card) 64%); }
[data-theme="dark"] .lc-kpi--amber { background: linear-gradient(145deg, rgba(217, 119, 6, 0.18) 0%, var(--card) 64%); }
[data-theme="dark"] .lc-kpi--emerald { background: linear-gradient(145deg, rgba(5, 150, 105, 0.18) 0%, var(--card) 64%); }
[data-theme="dark"] .lc-kpi--sky { background: linear-gradient(145deg, rgba(2, 132, 199, 0.18) 0%, var(--card) 64%); }
[data-theme="dark"] .lc-kpi--rose { background: linear-gradient(145deg, rgba(225, 29, 72, 0.18) 0%, var(--card) 64%); }
/* Common admin panels / cards with inline light backgrounds */
[data-theme="dark"] body.admin-app .warn-box,
[data-theme="dark"] body.admin-app .flash {
color: var(--text);
}
/* =====================================================
MINIMALIST SIDEBAR — expanded / icon-only / top header
===================================================== */
body.admin-layout-sidebar {
--admin-rail-w: var(--admin-sidebar-width);
}
body.admin-layout-sidebar.admin-sidebar-collapsed {
--admin-rail-w: var(--admin-sidebar-collapsed-width);
--admin-sidebar-width: var(--admin-sidebar-collapsed-width);
}
body.admin-layout-sidebar .admin-nav-skin-open,
body.admin-layout-sidebar .admin-nav-skin-open .admin-sidebar-brand {
background: var(--admin-sidebar-bg) !important;
border-color: var(--admin-sidebar-border) !important;
}
body.admin-layout-sidebar .admin-sidebar-brand {
justify-content: space-between !important;
gap: 8px !important;
min-height: 72px !important;
padding: 12px 14px !important;
}
body.admin-layout-sidebar .admin-sidebar-brand .brand {
min-width: 0 !important;
flex: 1 1 auto !important;
}
body.admin-layout-sidebar .admin-sidebar-brand-actions {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
body.admin-layout-sidebar .admin-sidebar-brand-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 8px;
border: 1px solid var(--admin-sidebar-border);
background: var(--admin-sidebar-icon-bg);
color: var(--admin-sidebar-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
body.admin-layout-sidebar .admin-sidebar-brand-actions button:hover {
background: var(--admin-sidebar-hover);
color: var(--admin-sidebar-text);
border-color: var(--admin-sidebar-active-border);
}
body.admin-layout-sidebar .admin-sidebar-brand-actions button svg {
width: 16px;
height: 16px;
display: block;
}
body.admin-layout-sidebar .admin-nav-section-label {
color: var(--admin-sidebar-group-color) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
padding: 12px 12px 4px !important;
}
body.admin-layout-sidebar .admin-nav-leaf,
body.admin-layout-sidebar .admin-nav-details summary,
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub {
color: var(--admin-sidebar-text) !important;
border-radius: 8px !important;
margin: 0 6px 2px !important;
text-decoration: none !important;
}
body.admin-layout-sidebar .admin-nav-leaf,
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 36px !important;
padding: 0 10px !important;
font-size: 13px !important;
font-weight: 500 !important;
}
body.admin-layout-sidebar .admin-nav-details summary {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 36px !important;
padding: 0 10px !important;
font-size: 13px !important;
font-weight: 500 !important;
list-style: none !important;
cursor: pointer;
}
body.admin-layout-sidebar .admin-nav-leaf .icon,
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub .icon {
width: 18px !important;
height: 18px !important;
opacity: 0.85 !important;
flex-shrink: 0 !important;
}
body.admin-layout-sidebar .admin-nav-leaf:hover,
body.admin-layout-sidebar .admin-nav-details summary:hover,
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub:hover {
background: var(--admin-sidebar-hover) !important;
}
body.admin-layout-sidebar .admin-nav-leaf.active,
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub.active {
color: var(--admin-sidebar-active-text) !important;
background: var(--admin-sidebar-active) !important;
box-shadow: inset -3px 0 0 var(--admin-sidebar-active-border) !important;
font-weight: 600 !important;
}
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub {
padding-left: 10px !important;
font-size: 12px !important;
color: var(--admin-sidebar-muted) !important;
}
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub.active {
color: var(--admin-sidebar-active-text) !important;
}
body.admin-layout-sidebar .admin-sidebar-footer {
padding: 8px 6px 10px !important;
border-top: 1px solid var(--admin-sidebar-border) !important;
}
body.admin-layout-sidebar .admin-sidebar-footer a {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 34px !important;
padding: 0 10px !important;
margin: 0 6px 2px !important;
border-radius: 8px !important;
color: var(--admin-sidebar-muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
text-decoration: none !important;
}
body.admin-layout-sidebar .admin-sidebar-footer a:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
body.admin-layout-sidebar .admin-sidebar-footer a .icon {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
}
body.admin-layout-sidebar .admin-sidebar-footer a .icon-chip {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
border-radius: 0 !important;
background: transparent !important;
}
body.admin-layout-sidebar .admin-sidebar-footer a .icon-chip .icon-nav {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
max-width: 16px !important;
max-height: 16px !important;
aspect-ratio: 1 / 1 !important;
}
body.admin-layout-sidebar .admin-sidebar-brand-actions button.is-collapsed svg {
transform: scaleX(-1);
}
/* Icon-only collapsed rail — no labels, icons only + title tooltips */
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-nav-skin-open {
overflow-x: hidden !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-nav-skin-scroll {
padding: 6px 0 10px !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-brand .brand-wordmark {
display: none !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-brand .brand {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
order: 1 !important;
padding: 2px 4px !important;
text-decoration: none !important;
}
/* Collapsed rail: compact mark (not full iSHIP wordmark); light skins keep dark mark */
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-brand .brand-logo {
content: url('../crewlistai-mark.png') !important;
display: block !important;
height: 32px !important;
width: 32px !important;
max-width: 36px !important;
max-height: 36px !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
filter: none !important;
border-radius: 8px !important;
}
/* Blue/dark collapsed rails: force mark white (no dedicated white mark asset) */
html[data-theme="dark"] body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed:not([data-sidebar-skin="light"]):not([data-sidebar-custom-tone="light"]) .admin-sidebar-brand .brand-logo,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed[data-sidebar-skin="blue"] .admin-sidebar-brand .brand-logo,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed[data-sidebar-skin="dark"] .admin-sidebar-brand .brand-logo,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed[data-sidebar-skin="custom"][data-sidebar-custom-tone="dark"] .admin-sidebar-brand .brand-logo {
content: url('../crewlistai-mark.png') !important;
filter: brightness(0) invert(1) !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-brand .brand-mark {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
color: var(--admin-sidebar-active-text, #fff) !important;
background: var(--admin-sidebar-user-avatar-bg, #2563eb) !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-brand {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 6px 8px !important;
gap: 6px !important;
min-height: 72px !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-brand-actions {
flex-direction: row !important;
width: 100% !important;
align-items: center !important;
justify-content: center !important;
order: 2 !important;
gap: 4px !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-hide-btn {
display: none !important;
}
/* Beat earlier display:block !important guardrails on section labels */
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-nav-section-label,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links .admin-nav-section-label,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-nav-details > summary,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links .admin-nav-details > summary,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-nav-section-spacer {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-nav-details,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links .admin-nav-details {
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-footer a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 44px !important;
min-height: 44px !important;
margin: 2px 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 0 !important;
line-height: 0 !important;
letter-spacing: 0 !important;
text-indent: 0 !important;
gap: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: clip !important;
color: transparent !important;
position: relative !important;
}
/* Floating tip for collapsed icons (positioned by JS; native title is fallback) */
.admin-sidebar-collapsed-tip {
position: fixed;
z-index: 100000;
max-width: 240px;
padding: 6px 10px;
border-radius: 6px;
background: #111827;
color: #f9fafb;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease;
}
.admin-sidebar-collapsed-tip.is-visible {
opacity: 1;
visibility: visible;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf .icon,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub .icon,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-footer a .icon,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf .icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub .icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-footer a .icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf i.icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub i.icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-footer a i.icon-nav {
display: block !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
aspect-ratio: 1 / 1 !important;
font-size: 18px !important;
line-height: 1 !important;
margin: 0 !important;
flex: none !important;
opacity: 0.88 !important;
color: var(--admin-sidebar-muted) !important;
object-fit: contain !important;
transform: none !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf .icon-chip,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub .icon-chip,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-footer a .icon-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 18px !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf.active .icon,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub.active .icon,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf.active .icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub.active .icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf.active .icon-chip .icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub.active .icon-chip .icon-nav {
color: var(--admin-sidebar-active-text) !important;
opacity: 1 !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf.active .icon-chip,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub.active .icon-chip {
background: transparent !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf:hover,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub:hover,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-footer a:hover {
background: transparent !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf:hover .icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub:hover .icon-nav,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-sidebar-footer a:hover .icon-nav {
color: var(--admin-sidebar-text) !important;
opacity: 1 !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-leaf.active,
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links a.admin-nav-sub.active {
background: transparent !important;
box-shadow: inset 3px 0 0 var(--admin-sidebar-active-border) !important;
}
body.admin-app.admin-layout-sidebar.admin-sidebar-collapsed .admin-header .nav-links .admin-nav-details .admin-nav-sub {
position: static !important;
left: auto !important;
top: auto !important;
min-width: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding-left: 0 !important;
display: flex !important;
}
/* Top-header mode: show menu bar, hide sidebar rail */
body.admin-app.admin-layout-topbar .admin-nav-skin-open,
body.admin-app.admin-layout-topbar .admin-sidebar-footer {
display: none !important;
}
body.admin-app.admin-layout-topbar .admin-nav-left {
display: flex !important;
}
body.admin-app.admin-layout-topbar .admin-topbar-menu {
display: flex !important;
}
body.admin-app.admin-layout-topbar header.admin-header {
left: 0 !important;
width: 100% !important;
}
body.admin-app.admin-layout-topbar main.container,
body.admin-app.admin-layout-topbar main.container-full {
margin-left: 0 !important;
}
/* Light sidebar: force readable nav text (legacy navy-sidebar rules used white type) */
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details summary,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-sidebar-footer a,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-sidebar-brand .brand-wordmark strong {
color: var(--admin-sidebar-text) !important;
}
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-sub {
color: var(--admin-sidebar-muted) !important;
}
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-sub:hover,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf:hover,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-details summary:hover {
color: var(--admin-sidebar-text) !important;
}
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-header .nav-links .admin-nav-sub.active,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-header .nav-links a.admin-nav-leaf.active {
color: var(--admin-sidebar-active-text) !important;
background: var(--admin-sidebar-active) !important;
}
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar .admin-nav-section-label {
color: var(--admin-sidebar-group-color) !important;
}
/* Minimal sidebar icons — keep every glyph square (no flex stretch / auto sizing) */
body.admin-layout-sidebar .admin-nav-leaf,
body.admin-layout-sidebar .admin-nav-details .admin-nav-sub,
body.admin-layout-sidebar .admin-sidebar-footer a {
align-items: center !important;
}
body.admin-layout-sidebar .icon-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
box-sizing: border-box !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
flex: 0 0 18px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 0 !important;
background: transparent !important;
overflow: visible !important;
line-height: 0 !important;
transition: color 0.15s ease, opacity 0.15s ease;
}
body.admin-layout-sidebar .icon-chip .icon-nav,
body.admin-layout-sidebar .icon-chip i.icon-nav,
body.admin-layout-sidebar .icon-chip svg.icon-nav,
body.admin-layout-sidebar .admin-nav-leaf svg.icon-nav,
body.admin-layout-sidebar .admin-nav-sub svg.icon-nav,
body.admin-layout-sidebar .admin-sidebar-footer svg.icon-nav {
box-sizing: border-box !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
max-width: 16px !important;
max-height: 16px !important;
aspect-ratio: 1 / 1 !important;
flex: none !important;
font-size: 16px !important;
line-height: 1 !important;
color: var(--admin-sidebar-icon);
opacity: 0.9 !important;
display: block !important;
overflow: visible !important;
object-fit: contain !important;
vertical-align: middle !important;
transform: none !important;
}
body.admin-layout-sidebar .admin-nav-leaf .icon,
body.admin-layout-sidebar .admin-nav-sub .icon,
body.admin-layout-sidebar .admin-sidebar-footer a .icon {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
max-width: 16px !important;
max-height: 16px !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 16px !important;
align-self: center !important;
display: block !important;
overflow: visible !important;
object-fit: contain !important;
transform: none !important;
}
.admin-sidebar-brand .brand-mark {
display: none;
}
body.admin-layout-sidebar .admin-nav-leaf.active .icon-chip,
body.admin-layout-sidebar .admin-nav-sub.active .icon-chip {
background: transparent;
}
body.admin-layout-sidebar .admin-nav-leaf.active .icon-chip .icon-nav,
body.admin-layout-sidebar .admin-nav-sub.active .icon-chip .icon-nav {
color: var(--admin-sidebar-active-text);
opacity: 1 !important;
}
/*
* Comfortable table-row admin sidebar (expanded rail).
* Aligned icon + label columns, ~34–36px rows, light gap between items.
* Scoped so collapsed rail + non-admin shells are unchanged.
*/
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-sidebar-brand {
min-height: 56px !important;
padding: 8px 10px !important;
gap: 8px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-sidebar-brand .brand-logo {
height: 36px !important;
max-width: 160px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-skin-scroll {
padding: 4px 0 8px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-section-label,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links .admin-nav-section-label {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 10px 0 4px !important;
min-height: 18px !important;
padding: 8px 12px 5px !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
line-height: 1.45 !important;
color: var(--admin-sidebar-group-color) !important;
text-transform: uppercase !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: ellipsis !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links .admin-nav-section-label:first-child {
margin-top: 4px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-section-spacer {
height: 0 !important;
margin: 8px 12px !important;
border-bottom: 1px solid var(--admin-sidebar-border) !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links .admin-nav-details {
display: block !important;
width: 100% !important;
margin: 0 0 2px !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details[open] summary {
margin-bottom: 2px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details summary,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links .admin-nav-details summary,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links a.admin-nav-leaf,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links a.admin-nav-sub,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details .admin-nav-sub {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
box-sizing: border-box !important;
min-height: 34px !important;
height: auto !important;
max-height: none !important;
margin: 1px 0 !important;
padding: 8px 12px !important;
border: none !important;
border-radius: 0 !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details summary,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links .admin-nav-details summary,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links a.admin-nav-leaf {
color: var(--admin-sidebar-text) !important;
font-weight: 500 !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details .admin-nav-sub,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links a.admin-nav-sub {
padding: 7px 12px 7px 34px !important;
min-height: 32px !important;
color: var(--admin-sidebar-muted) !important;
font-weight: 400 !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details summary {
justify-content: flex-start !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details summary::after {
margin-left: auto !important;
flex-shrink: 0 !important;
}
/* Icon column — fixed width so labels align like a table */
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-leaf .icon,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-sub .icon,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-leaf .icon-chip,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-sub .icon-chip {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
max-width: 16px !important;
max-height: 16px !important;
flex: 0 0 16px !important;
margin: 0 !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details summary:hover,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links a.admin-nav-leaf:hover,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links a.admin-nav-sub:hover,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details .admin-nav-sub:hover {
background: var(--admin-sidebar-hover) !important;
color: var(--admin-sidebar-text) !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links a.admin-nav-leaf.active,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links a.admin-nav-sub.active,
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-header .nav-links .admin-nav-details .admin-nav-sub.active {
background: var(--admin-sidebar-active) !important;
color: var(--admin-sidebar-active-text) !important;
font-weight: 600 !important;
box-shadow: inset 3px 0 0 var(--admin-sidebar-active-border) !important;
border: none !important;
border-radius: 0 !important;
padding-left: 12px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-details .admin-nav-sub.active {
padding-left: 34px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-nav-audit-alerts-group {
gap: 2px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-sidebar-footer {
padding: 8px 0 8px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-sidebar-footer a {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 34px !important;
height: auto !important;
margin: 1px 0 !important;
padding: 8px 12px !important;
border-radius: 0 !important;
font-size: 12px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-sidebar-user {
margin: 0 8px 4px !important;
padding: 8px 10px !important;
border-radius: 6px !important;
gap: 8px !important;
}
body.admin-app.admin-layout-sidebar:not(.admin-sidebar-collapsed) .admin-sidebar-user-avatar {
width: 30px !important;
height: 30px !important;
font-size: 10px !important;
}
body.admin-layout-sidebar[data-sidebar-skin="light"] .admin-sidebar-brand .brand-logo,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-sidebar-brand .brand-logo {
content: url('/iship-logo.png');
filter: none !important;
background: transparent;
padding: 0;
box-shadow: none;
}
/* Sidebar color skins (light / blue / dark) */
body.admin-app.admin-layout-sidebar[data-sidebar-skin="light"] {
--admin-sidebar-bg: #ffffff;
--admin-sidebar-bg-top: #ffffff;
--admin-sidebar-border: #e5e7eb;
--admin-sidebar-text: #374151;
--admin-sidebar-muted: #6b7280;
--admin-sidebar-group-color: #9ca3af;
--admin-sidebar-summary-chevron: #9ca3af;
--admin-sidebar-accent: #3254db;
--admin-sidebar-active: transparent;
--admin-sidebar-active-text: #3254db;
--admin-sidebar-hover: #f3f4f6;
--admin-sidebar-active-border: #3254db;
--admin-sidebar-nav-shadow: 1px 0 0 #e5e7eb;
--admin-sidebar-user-bg: #f9fafb;
--admin-sidebar-user-strong: #111827;
--admin-sidebar-user-avatar-bg: #3254db;
--admin-sidebar-user-avatar-fg: #ffffff;
--admin-sidebar-chevron: #9ca3af;
--admin-sidebar-icon: #6b7280;
--admin-sidebar-icon-bg: #f3f4f6;
}
body.admin-app.admin-layout-sidebar[data-sidebar-skin="blue"] {
--admin-sidebar-bg: #3254db;
--admin-sidebar-bg-top: #2f4ec9;
--admin-sidebar-border: rgba(255, 255, 255, 0.14);
--admin-sidebar-text: #ffffff;
--admin-sidebar-muted: rgba(255, 255, 255, 0.72);
--admin-sidebar-group-color: rgba(255, 255, 255, 0.55);
--admin-sidebar-summary-chevron: rgba(255, 255, 255, 0.5);
--admin-sidebar-accent: #ffffff;
--admin-sidebar-active: rgba(255, 255, 255, 0.12);
--admin-sidebar-active-text: #ffffff;
--admin-sidebar-hover: rgba(255, 255, 255, 0.08);
--admin-sidebar-active-border: #ffffff;
--admin-sidebar-nav-shadow: 4px 0 24px rgba(37, 99, 235, 0.25);
--admin-sidebar-user-bg: rgba(0, 0, 0, 0.18);
--admin-sidebar-user-strong: #ffffff;
--admin-sidebar-user-avatar-bg: rgba(255, 255, 255, 0.2);
--admin-sidebar-user-avatar-fg: #ffffff;
--admin-sidebar-chevron: rgba(255, 255, 255, 0.55);
--admin-sidebar-icon: #ffffff;
--admin-sidebar-icon-bg: rgba(255, 255, 255, 0.14);
}
body.admin-app.admin-layout-sidebar[data-sidebar-skin="dark"] {
--admin-sidebar-bg: #18181b;
--admin-sidebar-bg-top: #141416;
--admin-sidebar-border: rgba(255, 255, 255, 0.08);
--admin-sidebar-text: #e5e7eb;
--admin-sidebar-muted: #9ca3af;
--admin-sidebar-group-color: rgba(156, 163, 175, 0.75);
--admin-sidebar-summary-chevron: rgba(156, 163, 175, 0.55);
--admin-sidebar-accent: #ffffff;
--admin-sidebar-active: rgba(255, 255, 255, 0.06);
--admin-sidebar-active-text: #ffffff;
--admin-sidebar-hover: rgba(255, 255, 255, 0.05);
--admin-sidebar-active-border: #ffffff;
--admin-sidebar-nav-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
--admin-sidebar-user-bg: rgba(255, 255, 255, 0.06);
--admin-sidebar-user-strong: #f9fafb;
--admin-sidebar-user-avatar-bg: #3f3f46;
--admin-sidebar-user-avatar-fg: #f4f4f5;
--admin-sidebar-chevron: rgba(255, 255, 255, 0.45);
--admin-sidebar-icon: #d1d5db;
--admin-sidebar-icon-bg: rgba(255, 255, 255, 0.08);
}
body.admin-layout-sidebar[data-sidebar-skin="light"] .admin-nav-leaf.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="light"] .admin-nav-sub.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="blue"] .admin-nav-leaf.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="blue"] .admin-nav-sub.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="dark"] .admin-nav-leaf.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="dark"] .admin-nav-sub.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="dark"] .admin-nav-leaf.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="dark"] .admin-nav-sub.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-nav-leaf.active .icon-chip,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-nav-sub.active .icon-chip {
background: transparent;
}
body.admin-layout-sidebar[data-sidebar-skin="light"] .admin-nav-leaf.active .icon-chip .icon-nav,
body.admin-layout-sidebar[data-sidebar-skin="light"] .admin-nav-sub.active .icon-chip .icon-nav {
color: #3254db;
}
body.admin-layout-sidebar[data-sidebar-skin="blue"] .admin-nav-leaf.active .icon-chip .icon-nav,
body.admin-layout-sidebar[data-sidebar-skin="blue"] .admin-nav-sub.active .icon-chip .icon-nav,
body.admin-layout-sidebar[data-sidebar-skin="dark"] .admin-nav-leaf.active .icon-chip .icon-nav,
body.admin-layout-sidebar[data-sidebar-skin="dark"] .admin-nav-sub.active .icon-chip .icon-nav,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="dark"] .admin-nav-leaf.active .icon-chip .icon-nav,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="dark"] .admin-nav-sub.active .icon-chip .icon-nav {
color: #ffffff;
}
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-nav-leaf.active .icon-chip .icon-nav,
body.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-nav-sub.active .icon-chip .icon-nav {
color: var(--admin-sidebar-active-text, #2563eb);
}
/* Light sidebar: never white active label (custom color picker could set #fff on #fff) */
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar[data-sidebar-skin="light"] .admin-nav-leaf.active,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar[data-sidebar-skin="light"] .admin-nav-details .admin-nav-sub.active,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-nav-leaf.active,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-nav-details .admin-nav-sub.active {
color: var(--admin-sidebar-active-text, #2563eb) !important;
}
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar[data-sidebar-skin="light"] .admin-nav-leaf.active .icon-chip .icon-nav,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar[data-sidebar-skin="light"] .admin-nav-sub.active .icon-chip .icon-nav,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-nav-leaf.active .icon-chip .icon-nav,
html:not([data-theme="dark"]) body.admin-app.admin-layout-sidebar[data-sidebar-skin="custom"][data-sidebar-custom-tone="light"] .admin-nav-sub.active .icon-chip .icon-nav {
color: var(--admin-sidebar-active-text, #2563eb) !important;
}
/* Header sidebar color picker */
.admin-sidebar-color-wrap {
position: relative;
flex: 0 0 auto;
}
.admin-sidebar-color-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid var(--border);
/* Live company theme swatch — same hex as admin + crew sidebar. */
background: var(--admin-sidebar-bg, var(--ui-primary, #2563eb));
color: var(--admin-sidebar-text, #fff);
cursor: pointer;
padding: 0;
transition: background 0.15s, border-color 0.15s, filter 0.15s;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.admin-sidebar-color-trigger:hover,
.admin-sidebar-color-wrap.is-open .admin-sidebar-color-trigger {
filter: brightness(1.08);
border-color: var(--glass-border);
}
.admin-sidebar-color-panel {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
padding: 12px;
border-radius: 12px;
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
z-index: 80;
}
.admin-sidebar-color-wrap.is-open .admin-sidebar-color-panel {
display: block;
}
.admin-sidebar-color-panel-title {
font-size: 12px;
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
}
.admin-sidebar-color-custom-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
background: var(--accent-light);
border: 1px solid var(--border);
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.admin-sidebar-color-custom-row span {
flex: 1 1 auto;
}
.admin-sidebar-custom-color-input--row {
width: 36px;
height: 28px;
padding: 0;
border: 1px solid var(--border);
border-radius: 6px;
background: transparent;
cursor: pointer;
}
.admin-sidebar-color-hex {
font-size: 11px;
color: var(--muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.admin-sidebar-color-locked-note {
margin: 0 0 10px;
font-size: 12px;
line-height: 1.4;
color: var(--muted, #64748b);
}
.admin-sidebar-color-wrap.is-company-brand-locked .admin-sidebar-custom-color-input--row {
cursor: not-allowed;
opacity: 0.85;
}
/* Messaging config channel list — must not use bare