/* PROTEST theme bridge: brings the older mockup pages onto the PROTEST design system
   (colours, type, sidebar logo, buttons, cards) without rewriting their markup or scripts.
   Loaded last on every page that doesn't use protest-app.css. Not part of the product:
   the rebuild uses protest-app.css components. Values from the design system tokens. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@700&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap');

html:root {
  --teal: #034a55;          /* PROTEST blue: primary buttons, active states */
  --teal-mid: #034a55;
  --teal-light: #1d5a41;    /* core green: live / ok */
  --blue: #346aac;          /* chart blue */
  --coral: #a34a3f;         /* chart red */
  --gray: #808080;          /* ambient grey */
  --red: #c00000;
  --amber: #f39200;
  --bg: #f4f4f4;            /* surface-sunken over white */
  --surface: #ffffff;
  --surface2: #f4f4f4;
  --border: #e2e2e2;
  --border-md: #c4c4c4;
  --text: #272727;          /* off black */
  --text-2: #4d4d4d;
  --text-3: #808080;
  --sidebar: #034a55;
  --sidebar-text: #d1d1d1;
}

body { font-family: "DM Sans", system-ui, sans-serif; color: var(--text); }

/* Sidebar: the PROTEST logo only (no OTB), same file and size as protest-app.css; accent bar on the active item */
.sidebar { background: #034a55 !important; }
.sidebar-logo { padding: 18px 18px 16px !important; }
.sidebar-logo .logo-img { content: url(protest-logo-white.png); width: 48px !important; height: 48px !important; border-radius: 0 !important; object-fit: contain !important; display: block; }
.sidebar-logo .logo-text, .sidebar-logo .logo-name, .sidebar-logo .brand-name { display: none !important; }
.project-label-sm { font-family: "DM Mono", ui-monospace, monospace; letter-spacing: .12em; color: #d1d1d1 !important; }
.nav-item { color: #d1d1d1 !important; }
.nav-item:hover { color: #fff !important; }
.nav-item.active { color: #fff !important; background: rgba(255,255,255,.08) !important; border-left-color: #2ac1de !important; box-shadow: inset 3px 0 0 #2ac1de; }
.nav-sub.active, .snav-item.active { color: #034a55 !important; }
.sidebar .nav-sub.active { color: #fff !important; }   /* the rule above is for the settings list, not the left column */
.snav-item.active { background: rgba(3,74,85,.07) !important; box-shadow: inset 3px 0 0 #2ac1de; }

/* Headings in Barlow 700, section labels in DM Mono */
.page-title, .pour-title, .modal-title, .section-title, .form-card-title, .save-title, h1, h2 { font-family: Barlow, "Arial Narrow", sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.pour-title, .page-title { font-size: 20px !important; color: #272727 !important; }
.card-title, .metric-label, .a-title, .mob-card-title, .form-label, .field-label, th { font-family: "DM Mono", ui-monospace, monospace !important; letter-spacing: .12em !important; }
.card-title, .metric-label { color: #272727 !important; font-weight: 400 !important; }

/* Buttons and pills as the design system */
.btn { border-radius: 8px !important; font-weight: 500 !important; }
.btn-primary, .mob-btn, .mob-edit-btn, .mob-edit-data-btn { background: #034a55 !important; border-color: #034a55 !important; color: #fff !important; }
.pill-group { background: #f4f4f4 !important; border-color: #e2e2e2 !important; }
.pill.active { color: #034a55 !important; }
.badge { font-family: "DM Mono", ui-monospace, monospace !important; }

/* Cards: hairline border, 12 px radius, no shadow */
.card, .metric, .form-card, .settings-card, .panel { border-radius: 12px !important; box-shadow: none !important; border-color: #d1d1d1 !important; }

/* Live / status colours */
.live-dot { background: #1d5a41 !important; }
.live-chip { color: #1d5a41 !important; }

/* A table wider than its card scrolls inside it (nav.js wraps tables in .pt-table-scroll) */
.pt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }