:root {
  --p3-navy: #0E4675;
  --p3-navy-dark: #0A3559;
  --p3-navy-light: #161B22;
  --p3-navy-bright: #4C93D9;
  --p3-green: #65804B;
  --p3-green-dark: #4F6539;
  --p3-green-light: #EEF3E8;
  --p3-green-bright: #8FCB63;
  --p3-slate: #93A0B2;
  --p3-bg: #0B0F19;
  --p3-dark-surface: #0F1317;
  --p3-dark-border: #242A31;
  --p3-dark-text: #FFFFFF;
  --p3-dark-text-secondary: #94A3B8;
  --p3-amber: #B45309;
  --p3-amber-bg: #FEF3E2;
  --p3-red: #B3261E;
  --p3-red-bg: #FCEEEE;

  --p3-aurora-teal: #00F2FE;
  --p3-aurora-cyan: #4FACFE;
  --p3-aurora-violet: #7F00FF;
  --p3-aurora-gradient: linear-gradient(90deg, var(--p3-aurora-teal) 0%, var(--p3-aurora-cyan) 100%);
}

body {
  background: var(--p3-bg);
  color: var(--p3-dark-text);
}

.text-muted {
  color: var(--p3-dark-text-secondary) !important;
}

/* Navbar */
.p3-navbar {
  background: rgba(11, 15, 25, .6);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.p3-navbar .navbar-brand {
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
}
.p3-navbar .nav-link {
  color: rgba(255,255,255,.82);
}
.p3-navbar .nav-link:hover, .p3-navbar .nav-link.active {
  color: #fff;
}
.p3-navbar img.brand-logo {
  height: 30px;
  width: auto;
}

/* Sidebar */
.p3-sidebar {
  background: #fff;
  border-right: 1px solid #E2E8F0;
  min-height: calc(100vh - 56px);
}
.p3-sidebar .nav-link {
  color: var(--p3-slate);
  border-radius: .5rem;
  padding: .55rem .9rem;
  font-weight: 500;
  font-size: .92rem;
}
.p3-sidebar .nav-link i { width: 1.25rem; text-align: center; margin-right: .5rem; }
.p3-sidebar .nav-link.active {
  background: var(--p3-navy-light);
  color: var(--p3-navy);
}
.p3-sidebar .nav-link:hover:not(.active) {
  background: #F1F5F9;
}

/* Buttons */
.btn-p3-primary {
  background: var(--p3-aurora-gradient);
  border-color: transparent;
  color: #fff;
}
.btn-p3-primary:hover {
  background: linear-gradient(90deg, var(--p3-aurora-cyan) 0%, var(--p3-aurora-teal) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 16px rgba(0, 242, 254, .35);
}
.btn-p3-accent {
  background: var(--p3-green);
  border-color: var(--p3-green);
  color: #fff;
}
.btn-p3-accent:hover { background: var(--p3-green-dark); border-color: var(--p3-green-dark); color: #fff; }
.btn-outline-p3 {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn-outline-p3:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
  color: #fff;
}

.form-control {
  background: var(--p3-dark-surface);
  border-color: var(--p3-dark-border);
  color: var(--p3-dark-text);
}
.form-control:focus {
  background: var(--p3-dark-surface);
  border-color: var(--p3-navy-bright);
  color: var(--p3-dark-text);
  box-shadow: 0 0 0 .25rem rgba(76, 147, 217, .25);
}
.form-control::placeholder {
  color: var(--p3-dark-text-secondary);
}

/* Django flash-message alerts, dark-tinted (Bootstrap's defaults are opaque light pastels) */
.alert-success { background: rgba(143, 203, 99, .12); border-color: rgba(143, 203, 99, .35); color: #FFFFFF; }
.alert-danger  { background: rgba(211, 71, 61, .15);  border-color: rgba(211, 71, 61, .4);   color: #FFFFFF; }
.alert-warning { background: rgba(217, 155, 74, .15); border-color: rgba(217, 155, 74, .4);  color: #FFFFFF; }
.alert-info    { background: rgba(76, 147, 217, .12); border-color: rgba(76, 147, 217, .35); color: #FFFFFF; }
.alert .btn-close { filter: invert(1) grayscale(1); }

/* Cards / metric tiles */
.p3-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.p3-metric {
  border-radius: .75rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid #E2E8F0;
}
.p3-metric .metric-value { font-size: 1.7rem; font-weight: 700; color: var(--p3-navy); }
.p3-metric .metric-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--p3-slate); }
.p3-metric .metric-icon {
  width: 2.5rem; height: 2.5rem; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--p3-navy-light); color: var(--p3-navy); font-size: 1.1rem;
}
.p3-metric.accent .metric-icon { background: var(--p3-green-light); color: var(--p3-green-dark); }

/* Status badges */
.badge-match { background: var(--p3-green-light); color: var(--p3-green-dark); border: 1px solid #CFE0BF; }
.badge-mismatch { background: var(--p3-amber-bg); color: var(--p3-amber); border: 1px solid #F5DDB5; }
.badge-missing { background: var(--p3-red-bg); color: var(--p3-red); border: 1px solid #F1C8C6; }
.badge-open { background: #FEF3E2; color: #B45309; }
.badge-closed { background: #EEF3E8; color: #4F6539; }
.badge-irresolvable { background: #F1F5F9; color: #475569; }

/* Table row tints matching status */
tr.row-match { background: #F4FAF0; }
tr.row-mismatch { background: #FFFAEF; }
tr.row-missing { background: #FDF3F2; }

.p3-page-header {
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: .9rem;
  margin-bottom: 1.25rem;
}
.p3-page-header h1 { font-size: 1.4rem; font-weight: 700; color: #0F172A; }

.section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--p3-slate);
}

.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: #E2E8F0; }
.timeline-item { position: relative; padding-bottom: 1.1rem; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.5rem; top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--p3-navy); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--p3-navy-light);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--p3-navy) 0%, var(--p3-navy-dark) 55%, var(--p3-green-dark) 100%);
}
.auth-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  max-width: 420px;
  width: 100%;
}

.comment-thread { max-height: 220px; overflow-y: auto; }
.comment-item { border-left: 3px solid var(--p3-navy-light); padding: .35rem .75rem; margin-bottom: .5rem; background: #F8FAFC; border-radius: 0 .4rem .4rem 0; }
.comment-item .meta { font-size: .72rem; color: var(--p3-slate); }

.diff-old { color: #94A3B8; text-decoration: line-through; font-size: .82rem; }
.diff-new { color: #0F172A; font-weight: 600; }

/* Mirrored scrollbar above a wide table, synced with the table's own bottom scrollbar */
.top-scroll { overflow-x: auto; overflow-y: hidden; height: 16px; }
.top-scroll > div { height: 1px; }