/* Protocol Software Development CI (protosoft.co.za): ink #0C0E1D, purple #4635B9, accent #CC3366, Poppins */
:root {
    --ink: #0c0e1d;
    --ink-2: #080913;
    --brand: #4635b9;
    --brand-dark: #382a96;
    --brand-light: #f1effc;
    --accent: #cc3366;
    --navy: #4635b9; /* legacy name used by pages: now Protocol purple */
    --navy-dark: #382a96;
    --sidebar-w: 255px;
    --radius: 14px;
    --bs-primary: #4635b9;
    --bs-primary-rgb: 70, 53, 185;
    --bs-link-color: #4635b9;
    --bs-link-color-rgb: 70, 53, 185;
    --bs-link-hover-color: #382a96;
    --bs-link-hover-color-rgb: 56, 42, 150;
    --bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --bs-body-color: #333333;
    --bs-border-radius: .6rem;
    --bs-border-radius-lg: var(--radius);
}
body { background: #f6f5fb; font-size: .875rem; color: #333; }
h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* Buttons: pill shaped */
.btn { border-radius: 99px; font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: #2f2380; --bs-btn-active-border-color: #2f2380; --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-focus-shadow-rgb: 70, 53, 185; }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-focus-shadow-rgb: 70, 53, 185; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: 99px; border-bottom-left-radius: 99px; }
.btn-group > .btn:last-child { border-top-right-radius: 99px; border-bottom-right-radius: 99px; }
.text-bg-primary { background-color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.form-control, .form-select { border-radius: .6rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #a79ce6; box-shadow: 0 0 0 .2rem rgba(70, 53, 185, .18); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.progress { border-radius: 99px; }
.progress-bar { background-color: var(--brand); }
.badge { font-weight: 500; }
.alert { border-radius: var(--radius); }
.pagination { --bs-pagination-active-bg: #4635b9; --bs-pagination-active-border-color: #4635b9; --bs-pagination-color: #4635b9; }
.nav-pills { --bs-nav-pills-link-active-bg: #4635b9; --bs-nav-pills-border-radius: 99px; }
.nav-tabs .nav-link { color: #555b6e; }
.nav-tabs .nav-link.active { color: var(--brand); font-weight: 600; border-bottom-color: #fff; box-shadow: inset 0 3px 0 var(--brand); }
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.nav-tabs .nav-link { white-space: nowrap; }

/* Shell */
.admin-shell { display: flex; min-height: 100vh; }
.sidebar { background-color: var(--ink) !important; color: #fff; width: var(--sidebar-w); border-top: 4px solid var(--brand); }
@media (min-width: 992px) {
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; display: flex; flex-direction: column; }
    .main { margin-left: var(--sidebar-w); }
}
.sidebar.offcanvas-lg { --bs-offcanvas-bg: var(--ink); --bs-offcanvas-width: var(--sidebar-w); }
.sidebar-brand { padding: 1.1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand .brand-mark { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8f84ec, #4635b9 60%, #2a1f7a); align-items: center; justify-content: center; margin-right: .6rem; }
.sidebar-nav { padding: .6rem .6rem 1.5rem; width: 100%; }
.sidebar .nav-link { color: rgba(255,255,255,.75); display: flex; align-items: center; gap: .65rem; padding: .5rem .8rem; border-radius: 99px; font-weight: 500; margin-bottom: 2px; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { color: #fff; background: var(--brand); box-shadow: 0 4px 14px rgba(70,53,185,.45); }
.sidebar .nav-link .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar .nav-section { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: rgba(255,255,255,.4); padding: 1rem .8rem .3rem; }
.sidebar-footer { padding: 1rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-footer img { height: 24px; width: auto; opacity: .85; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid #ecebf5; padding: .65rem 1.25rem; position: sticky; top: 0; z-index: 1020; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #4635b9, #7a6ce0); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.content { padding: 1.5rem; }
@media (max-width: 575.98px) { .content { padding: .75rem; } }

/* Cards and data */
.card { border: 1px solid #ecebf5; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(12,14,29,.04); }
.card > .card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card-header { background: #fff; font-weight: 600; color: var(--ink); }
.kpi { padding: 1.1rem; height: 100%; }
.kpi .kpi-label { color: #69727d; font-size: .78rem; }
.kpi .kpi-value { font-size: 1.65rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.kpi .kpi-icon { font-size: 1.15rem; color: var(--brand); background: var(--brand-light); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.table { --bs-table-bg: transparent; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #69727d; font-weight: 600; white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f6f4fe; }
tr[data-href] { cursor: pointer; }
.page-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.page-head h1 { font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--ink); }
.chart-box { position: relative; height: 260px; }
.field-hidden { color: #adb5bd; font-style: italic; }
.vis-col-public { background: #f1faf5; }
.vis-col-member { background: #f4f2fd; }
.vis-col-admin { background: #fdf3f6; }
.timeline { list-style: none; padding-left: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: #e4e1f5; }
.timeline li { position: relative; padding-left: 2rem; margin-bottom: 1rem; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.timeline li.current::before { background: var(--accent); border-color: var(--accent); }
.dl-grid { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: .35rem .75rem; margin: 0; }
.dl-grid dt { color: #69727d; font-weight: 500; }
.dl-grid dd { margin: 0; word-break: break-word; }
.log-box { background: var(--ink); color: #d6d1f7; font-family: Consolas, monospace; font-size: .8rem; padding: .75rem; border-radius: .6rem; max-height: 360px; overflow-y: auto; white-space: pre-wrap; }

/* Login (not signed in): dark ink page like protosoft.co.za */
body.login-page {
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse at 80% 10%, rgba(70,53,185,.45), transparent 55%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    min-height: 100vh;
}
body.login-page .login-head h1, body.login-page .login-head .text-muted, body.login-page .login-foot { color: rgba(255,255,255,.85) !important; }
body.login-page .login-foot img { height: 24px; }
.login-card { max-width: 560px; margin: 3rem auto; }
.identity-option { cursor: pointer; }
.identity-option:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(70,53,185,.18); }