:root {
  --bc-navy: #102a43;
  --bc-navy-deep: #0b1f33;
  --bc-blue: #1769aa;
  --bc-blue-bright: #1976d2;
  --bc-cyan: #0e90a0;
  --bc-green: #16875b;
  --bc-amber: #d98b12;
  --bc-red: #d64545;
  --bc-bg: #f3f6fa;
  --bc-surface: #ffffff;
  --bc-border: #dfe7ef;
  --bc-text: #1e2d3d;
  --bc-muted: #68798c;
  --bc-radius: 12px;
  --bc-shadow: 0 8px 24px rgba(16, 42, 67, .07);
}

body.staff-portal {
  background: var(--bc-bg);
  color: var(--bc-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
}

.staff-portal .wrapper,
.staff-portal .content-wrapper,
.staff-portal .right-side { background: var(--bc-bg); }
.staff-portal .content-wrapper { border-left: 0; }
.staff-portal.fixed .content-wrapper,
.staff-portal.fixed .right-side { padding-top: 58px; }
.staff-portal.fixed .main-sidebar { position: fixed; }
.staff-portal.fixed .main-sidebar .sidebar {
  max-height: calc(100vh - 58px);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Header */
.staff-portal .main-header { box-shadow: 0 2px 12px rgba(15, 35, 55, .13); }
.staff-portal .main-header .logo {
  height: 58px;
  background: var(--bc-navy-deep) !important;
  color: #fff;
  line-height: 58px;
  text-align: left;
}
.staff-portal .main-header .navbar {
  min-height: 58px;
  background: #fff !important;
}
.staff-portal .main-header .navbar .sidebar-toggle {
  height: 58px;
  padding: 20px 18px;
  color: var(--bc-navy);
}
.staff-portal .main-header .navbar .sidebar-toggle:hover { background: #edf4fb; color: var(--bc-blue); }
.staff-portal .main-header .navbar-custom-menu > .navbar-nav > li > a {
  height: 58px;
  padding-top: 19px;
  color: #516274;
}
.staff-portal .main-header .navbar-custom-menu > .navbar-nav > li > a:hover,
.staff-portal .main-header .navbar-custom-menu > .navbar-nav > li.open > a { background: #f2f6fa; color: var(--bc-navy); }
.staff-portal .main-header .user-menu > a > .fa-user { margin-right: 7px; color: var(--bc-blue); }
.staff-portal .main-header .user-menu > a > .fa-angle-down { margin-left: 7px; color: #8da0b2; }
.staff-account-summary { padding: 16px 18px; border-bottom: 1px solid var(--bc-border); background: #f8fafc; }
.staff-account-summary strong,
.staff-account-summary span { display: block; }
.staff-account-summary strong { color: var(--bc-navy); font-size: 13px; }
.staff-account-summary span { margin-top: 4px; color: var(--bc-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.staff-portal .main-header .logo .logo-lg.staff-brand {
  display: flex !important;
  height: 58px;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  opacity: 1;
  visibility: visible;
}
.staff-brand img { width: 34px; height: 34px; object-fit: contain; }
.staff-brand-copy { display: flex !important; min-width: 0; flex-direction: column; color: #fff !important; line-height: 1.15; text-align: left; white-space: nowrap; }
.staff-brand-copy strong { display: block; color: #fff !important; font-size: 15px; letter-spacing: .2px; }
.staff-brand-copy small { margin-top: 3px; color: #9fb3c8; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; }
.staff-header-meta { color: var(--bc-muted) !important; font-size: 12px; }
.staff-header-meta i { margin-right: 5px; color: var(--bc-blue); }

/* Sidebar */
.staff-portal .main-sidebar { padding-top: 58px; background: var(--bc-navy-deep); }
.staff-portal .sidebar { padding-bottom: 24px; }
.staff-portal .sidebar-menu > li.header {
  padding: 18px 17px 8px;
  background: transparent;
  color: #7890a8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.staff-portal .sidebar-menu > li { margin: 3px 9px; }
.staff-portal .sidebar-menu > li > a {
  padding: 11px 36px 11px 12px;
  border-left: 0 !important;
  border-radius: 8px;
  color: #c5d2df;
}
.staff-portal .sidebar-menu > li > a > .fa-angle-left {
  right: 3px;
  margin-right: 0;
}
.staff-portal .sidebar-menu > li > a > .fa,
.staff-portal .sidebar-menu > li > a > .glyphicon { width: 20px; color: #8eabc4; }
.staff-portal .sidebar-menu > li:hover > a,
.staff-portal .sidebar-menu > li.active > a,
.staff-portal .sidebar-menu > li.menu-open > a {
  background: rgba(38, 132, 215, .2) !important;
  color: #fff !important;
}
.staff-portal .sidebar-menu > li.active > a > .fa,
.staff-portal .sidebar-menu > li:hover > a > .fa { color: #62b4ff; }
.staff-portal .sidebar-menu .treeview-menu { margin: 3px 0 7px; padding: 4px 0 4px 20px; background: transparent !important; }
.staff-portal .sidebar-menu .treeview-menu > li > a {
  padding: 8px 10px;
  border-radius: 7px;
  color: #9fb3c8;
  font-size: 12px;
}
.staff-portal .sidebar-menu .treeview-menu > li > a:hover { background: rgba(255,255,255,.05); color: #fff; }
.staff-portal .sidebar-menu .treeview-menu > li.active > a {
  position: relative;
  background: rgba(38, 132, 215, .3);
  color: #fff;
  font-weight: 650;
}
.staff-portal .sidebar-menu .treeview-menu > li.active > a:before {
  position: absolute;
  width: 3px;
  top: 7px;
  bottom: 7px;
  left: -10px;
  border-radius: 3px;
  background: #55b4ff;
  content: "";
}
.staff-portal .sidebar-menu .treeview.active > .treeview-menu,
.staff-portal .sidebar-menu .treeview.menu-open > .treeview-menu { display: block; }
.staff-portal .sidebar-menu > li.active > a .pull-right { color: #62b4ff; transform: rotate(-90deg); }

/* Page shell */
.staff-portal .content-header { padding: 22px 25px 13px; }
.staff-portal .content-header h1 { color: var(--bc-navy); font-size: 22px; font-weight: 700; text-transform: capitalize; }
.staff-portal .content-header h1 > i { display: none; }
.staff-portal .content-header h1 small { display: block; margin-top: 5px; color: var(--bc-muted); font-size: 12px; font-weight: 400; }
.staff-portal .content-header .breadcrumb { top: 25px; right: 25px; color: var(--bc-muted); font-size: 11px; }
.staff-portal .content-header .breadcrumb a { color: var(--bc-muted); }
.staff-portal .content { padding: 0 25px 26px; }
.staff-portal .workspace-panel,
.staff-portal .box {
  border: 1px solid var(--bc-border);
  border-top: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius);
  background: var(--bc-surface);
  box-shadow: var(--bc-shadow);
}
.staff-portal .box-header { padding: 14px 17px; border-bottom: 1px solid #e9eff5; }
.staff-portal .box-header .box-title { color: var(--bc-navy); font-size: 14px; font-weight: 700; letter-spacing: .15px; }
.staff-portal .box-header.with-border { border-bottom-color: #e9eff5; }
.staff-portal .box-body { padding: 16px; }
.staff-portal .box-footer { border-radius: 0 0 var(--bc-radius) var(--bc-radius); background: #fff; }
.staff-portal .box-tools .btn { color: #8091a3; }
.staff-portal .main-footer { padding: 15px 25px; border-top: 1px solid var(--bc-border); color: var(--bc-muted); font-size: 11px; }

/* Forms and buttons */
.staff-portal .form-control {
  height: 34px;
  border: 1px solid #cfdbe7;
  border-radius: 7px;
  box-shadow: none;
  color: var(--bc-text);
}
.staff-portal textarea.form-control { height: auto; }
.staff-portal .form-control:focus { border-color: #62a9e6; box-shadow: 0 0 0 3px rgba(25,118,210,.1); }
.staff-portal .btn { border: 0; border-radius: 7px; font-weight: 600; box-shadow: none; }
.staff-portal .btn-sm { padding: 7px 11px; }
.staff-portal .btn-xs { padding: 4px 7px; border-radius: 5px; }
.staff-portal .btn-default { border: 1px solid #d3dee9; background: #fff; color: #44576a; }
.staff-portal .btn-primary,
.staff-portal .btn-info { background: var(--bc-blue-bright); }
.staff-portal .btn-success { background: var(--bc-green); }
.staff-portal .btn-warning { background: var(--bc-amber); }
.staff-portal .btn-danger { background: var(--bc-red); }
.staff-portal .label { padding: 4px 7px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: .2px; }

/* Tables */
.staff-portal table.table,
.staff-portal table.table-bordered,
.staff-portal table.table-condensed { border-collapse: separate; border-spacing: 0; border-color: var(--bc-border); }
.staff-portal table thead.bg-blue,
.staff-portal table thead.bg-navy,
.staff-portal table thead.bg-purple,
.staff-portal table thead tr.bg-blue,
.staff-portal table thead tr.bg-navy,
.staff-portal table thead tr.bg-purple { background: var(--bc-navy) !important; color: #fff; }
.staff-portal table thead td,
.staff-portal table thead th { padding: 10px 8px !important; border-color: rgba(255,255,255,.13) !important; font-weight: 650; vertical-align: middle; }
.staff-portal table tbody td { padding: 9px 8px !important; border-color: #e7edf3 !important; vertical-align: middle; }
.staff-portal .table-striped > tbody > tr:nth-of-type(odd) { background: #f8fafc; }
.staff-portal .table-hover > tbody > tr:hover { background: #edf5fc; }
.staff-portal .pagination > li > a,
.staff-portal .pagination > li > span { border-color: var(--bc-border); color: var(--bc-blue); }

/* Modals and notifications */
.staff-portal .modal-content { overflow: hidden; border: 0; border-radius: 13px; box-shadow: 0 18px 50px rgba(9,30,50,.25); }
.staff-portal .modal-header { padding: 15px 18px; border-bottom: 1px solid var(--bc-border); background: var(--bc-navy) !important; color: #fff; }
.staff-portal .modal-body { padding: 19px; }
.staff-portal .modal-footer { border-top-color: var(--bc-border); }
.staff-portal .alert,
.staff-portal .callout,
.staff-portal .well { border-radius: 9px; }
.staff-portal .setting-website-callout { border-left: 0 !important; }
.staff-portal .dropdown-menu { border: 1px solid var(--bc-border); border-radius: 9px; box-shadow: var(--bc-shadow); }

/* Dashboard */
.page-main-home .content-header,
.page-main-home .workspace-panel > .box-header,
.page-main-home .workspace-panel > .box-footer { display: none; }
.page-main-home .content { padding-top: 22px; }
.page-main-home .workspace-panel { border: 0; background: transparent; box-shadow: none; }
.page-main-home .workspace-panel > .box-body { padding: 0; }
.staff-dashboard-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 25px 28px;
  border-radius: 14px;
  background: linear-gradient(125deg, #102a43 0%, #164f7c 68%, #117c91 100%);
  box-shadow: 0 12px 28px rgba(16,42,67,.18);
  color: #fff;
}
.staff-dashboard-hero:after {
  position: absolute;
  width: 260px;
  height: 260px;
  top: -135px;
  right: -45px;
  border: 42px solid rgba(255,255,255,.06);
  border-radius: 50%;
  content: "";
}
.staff-dashboard-eyebrow { margin-bottom: 7px; color: #8fd5ec; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.staff-dashboard-hero h2 { position: relative; z-index: 1; margin: 0 0 7px; font-size: 24px; font-weight: 700; }
.staff-dashboard-hero p { position: relative; z-index: 1; max-width: 620px; margin: 0; color: #d5e4ef; font-size: 13px; line-height: 1.55; }
.staff-dashboard-meta { position: absolute; z-index: 2; top: 25px; right: 28px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.08); color: #e7f2f8; font-size: 11px; }
.staff-dashboard-meta i { margin-right: 6px; color: #8fd5ec; }
.staff-metric-row { margin-right: -7px; margin-left: -7px; }
.staff-metric-row > div { padding-right: 7px; padding-left: 7px; }
.staff-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(16,42,67,.055);
}
.staff-metric-icon { display: flex; width: 37px; height: 37px; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 9px; font-size: 16px; }
.metric-blue .staff-metric-icon { background: #e8f2fd; color: #1769aa; }
.metric-amber .staff-metric-icon { background: #fff4dc; color: #c97908; }
.metric-green .staff-metric-icon { background: #e5f6ef; color: #16875b; }
.metric-red .staff-metric-icon { background: #fdeaea; color: #d64545; }
.staff-metric-value { color: var(--bc-navy); font-size: 25px; font-weight: 750; line-height: 1; }
.staff-metric-label { margin-top: 5px; color: #42576a; font-size: 12px; font-weight: 650; }
.staff-metric-link { position: absolute; right: 16px; bottom: 14px; color: var(--bc-blue); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.staff-metric-link:hover { color: var(--bc-navy); }
.staff-dashboard-panel { min-height: 100%; margin-bottom: 18px; border: 1px solid var(--bc-border); border-radius: 12px; background: #fff; box-shadow: var(--bc-shadow); }
.staff-dashboard-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #e9eff5; }
.staff-dashboard-panel-head h3 { margin: 0; color: var(--bc-navy); font-size: 14px; font-weight: 700; }
.staff-dashboard-panel-head small { color: var(--bc-muted); }
.staff-dashboard-panel-body { padding: 14px 16px; }
.staff-release-table-wrap { width: 100%; overflow-x: auto; }
.staff-release-table { min-width: 680px; margin-bottom: 0; table-layout: fixed; }
.staff-release-table td { overflow-wrap: break-word; }
.staff-release-table .release-document strong,
.staff-release-table .release-document small { display: block; }
.staff-release-table .release-document small { margin-top: 3px; color: var(--bc-muted); font-size: 10px; }
.staff-release-table .release-date { color: #42576a; font-size: 11px; line-height: 1.4; }
.staff-work-list { margin: 0; padding: 0; list-style: none; }
.staff-work-item { margin-bottom: 8px; }
.staff-work-item:last-child { margin-bottom: 0; }
.staff-work-item a { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid #e5edf4; border-radius: 9px; color: var(--bc-text); transition: .15s ease; }
.staff-work-item a:hover { border-color: #bad4eb; background: #f4f9fd; }
.staff-work-icon { display: flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 8px; background: #eaf3fb; color: var(--bc-blue); }
.staff-work-copy { min-width: 0; flex: 1; }
.staff-work-copy strong,
.staff-work-copy small { display: block; }
.staff-work-copy strong { color: var(--bc-navy); font-size: 12px; }
.staff-work-copy small { overflow: hidden; margin-top: 2px; color: var(--bc-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.staff-work-count { min-width: 26px; padding: 4px 7px; border-radius: 12px; background: #edf2f7; color: #42576a; font-size: 10px; font-weight: 700; text-align: center; }
.staff-work-count.has-work { background: #fde8e8; color: #c83b3b; }
.staff-empty-state { padding: 25px 10px; color: var(--bc-muted); text-align: center; }
.staff-empty-state i { display: block; margin-bottom: 8px; color: var(--bc-green); font-size: 24px; }

@media (max-width: 991px) {
  .staff-dashboard-meta { position: static; display: inline-block; margin-top: 15px; }
  .staff-portal .content-header .breadcrumb { display: none; }
}

@media (max-width: 767px) {
  .staff-portal .main-header .logo { height: 50px; line-height: 50px; text-align: center; }
  .staff-portal .main-header .logo .logo-lg.staff-brand { height: 50px; justify-content: center; }
  .staff-portal .main-header .navbar { min-height: 50px; }
  .staff-portal .main-sidebar { padding-top: 100px; }
  .staff-portal.fixed .content-wrapper,
  .staff-portal.fixed .right-side { padding-top: 100px; }
  .staff-portal.fixed .main-sidebar .sidebar { max-height: calc(100vh - 100px); }
  .staff-portal .content { padding: 0 12px 18px; }
  .staff-portal .content-header { padding: 17px 14px 11px; }
  .staff-dashboard-hero { padding: 21px; }
  .staff-dashboard-hero h2 { font-size: 20px; }
  .staff-header-meta { display: none !important; }
  .staff-portal .box-body { overflow-x: auto; }
}