/* ==========================================================================
   SMHERP design system
   One theme layer on top of AdminLTE 3 / Bootstrap 4. Replaces theme_modern,
   theme_calm, architectui_dashboard, custom_header and studies.css.
   ========================================================================== */

:root {
    --sm-primary: #2563eb;
    --sm-primary-600: #1d4ed8;
    --sm-primary-200: #bfd0fb;
    --sm-primary-soft: #e8efff;
    --sm-success: #059669;
    --sm-success-soft: #e6f7f0;
    --sm-warning: #d97706;
    --sm-warning-soft: #fdf3e3;
    --sm-danger: #dc2626;
    --sm-danger-soft: #fdecec;
    --sm-info: #0891b2;
    --sm-info-soft: #e3f5f9;
    --sm-purple: #7c3aed;
    --sm-purple-soft: #f0e9fd;

    --sm-bg: #f5f7fb;
    --sm-surface: #ffffff;
    --sm-border: #e5e7eb;
    --sm-border-strong: #d1d5db;
    --sm-card-border: #c5cdd8;
    --sm-card-head: #f2f5f9;
    --sm-text: #1f2937;
    --sm-text-2: #4b5563;
    --sm-muted: #6b7280;
    --sm-faint: #9ca3af;

    --sm-sidebar-bg: #0f172a;
    --sm-sidebar-text: #cbd5e1;
    --sm-sidebar-muted: #64748b;
    --sm-sidebar-active: rgba(59, 130, 246, 0.16);
    --sm-sidebar-hover: rgba(148, 163, 184, 0.10);

    --sm-radius: 10px;
    --sm-radius-sm: 8px;
    --sm-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sm-shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
    --sm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* legacy aliases used by older views */
    --primary-color: var(--sm-primary);
    --secondary-color: var(--sm-muted);
    --success-color: var(--sm-success);
    --info-color: var(--sm-info);
    --warning-color: var(--sm-warning);
    --danger-color: var(--sm-danger);
    --light-bg: var(--sm-bg);
    --dark-sidebar: var(--sm-sidebar-bg);
    --card-shadow: var(--sm-shadow);
    --card-radius: var(--sm-radius);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { font-size: 15px; }
body {
    font-family: var(--sm-font) !important;
    background-color: var(--sm-bg);
    color: var(--sm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--sm-font);
    color: var(--sm-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}
a { color: var(--sm-primary); }
a:hover { color: var(--sm-primary-600); text-decoration: none; }
.text-muted { color: var(--sm-muted) !important; }
.content-wrapper { background: var(--sm-bg) !important; }
.content-wrapper > .content { padding: 0 1.5rem 1.5rem; }
.content-wrapper > .content > .container-fluid { padding: 0; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.main-header.navbar {
    background: var(--sm-surface) !important;
    border-bottom: 1px solid var(--sm-border) !important;
    box-shadow: none;
    min-height: 60px;
    padding: 0 1.5rem 0 0.75rem;
}
.main-header .nav-link { color: var(--sm-text-2) !important; font-weight: 500; }
.main-header .nav-link:hover { color: var(--sm-primary) !important; }
.main-header .navbar-nav > .nav-item > .nav-link { padding: 0.55rem 0.7rem; }
.topbar-crumbs { display: flex; align-items: center; gap: 0.45rem; font-size: 0.933rem; color: var(--sm-muted); }
.topbar-crumbs a { color: var(--sm-muted); }
.topbar-crumbs a:hover { color: var(--sm-primary); }
.topbar-crumbs .sep { color: var(--sm-faint); }
.topbar-crumbs .current { color: var(--sm-text); font-weight: 500; }
.user-menu .user-chip {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.3rem 0.5rem 0.3rem 0.35rem; border-radius: 999px;
    transition: background .15s ease;
}
.user-menu .nav-link:hover .user-chip { background: var(--sm-bg); }
.user-chip .avatar, .user-menu .user-image {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 2px var(--sm-surface), 0 0 0 3px var(--sm-border);
    margin: 0;
}
.avatar-initials {
    width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sm-primary-soft); color: var(--sm-primary-600); font-weight: 600; font-size: 0.85rem;
}
.user-chip .who { display: flex; flex-direction: column; line-height: 1.15; }
.user-chip .who .name { font-size: 0.933rem; font-weight: 600; color: var(--sm-text); }
.user-chip .who .role { font-size: 0.8rem; color: var(--sm-muted); }
.user-menu .dropdown-menu {
    border: 1px solid var(--sm-border); border-radius: var(--sm-radius); box-shadow: var(--sm-shadow-md);
    padding: 0.35rem; min-width: 280px; margin-top: 0.5rem;
}
.user-menu .dropdown-item { border-radius: var(--sm-radius-sm); padding: 0.55rem 0.75rem; font-size: 0.933rem; color: var(--sm-text-2); }
.user-menu .dropdown-item:hover { background: var(--sm-bg); color: var(--sm-text); }
.user-menu .dropdown-item i { width: 1.25rem; color: var(--sm-muted); }
.user-menu .dropdown-divider { margin: 0.35rem 0; border-color: var(--sm-border); }
.user-menu .menu-head { padding: 0.6rem 0.75rem 0.5rem; }
.impersonation-pill {
    display: inline-flex; align-items: center; gap: 0.4rem; background: var(--sm-warning-soft); color: #92400e;
    border: 1px solid #fcd9a6; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.8rem; font-weight: 500;
}
.impersonation-pill .btn { padding: 0.1rem 0.5rem; font-size: 0.8rem; }

/* Which organisation the session is in. Only shown when the person has more
   than one, so a single-tenant installation reads exactly as it did. */
.org-pill {
    display: inline-flex; align-items: center; gap: 0.4rem; background: var(--sm-card-head); color: var(--sm-muted);
    border: 1px solid var(--sm-border); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.8rem; font-weight: 500;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.main-sidebar, .main-sidebar::before { background: var(--sm-sidebar-bg) !important; }
.main-sidebar { box-shadow: none !important; border-right: 1px solid rgba(255,255,255,0.04); overflow-x: hidden; }
.main-sidebar .sidebar { overflow-x: hidden; }
.main-sidebar .brand-link {
    display: flex; align-items: center; gap: 0.7rem; height: 60px; padding: 0 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important; color: #fff !important;
}
.main-sidebar .brand-link .brand-image {
    width: 32px; height: 32px; margin: 0; border-radius: 8px; object-fit: contain; opacity: 1; float: none;
}
.main-sidebar .brand-link .brand-mark {
    width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sm-primary); color: #fff; font-weight: 700; font-size: 0.933rem;
}
.main-sidebar .brand-link .brand-text { font-weight: 600 !important; font-size: 1rem; letter-spacing: -0.01em; color: #fff; }
.main-sidebar .sidebar { padding: 0.75rem 0.75rem 1.5rem; }
.nav-sidebar .nav-header {
    color: var(--sm-sidebar-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 1.1rem 0.75rem 0.4rem;
}
.nav-sidebar > .nav-item { margin-bottom: 2px; }
.nav-sidebar .nav-link {
    color: var(--sm-sidebar-text) !important; border-radius: var(--sm-radius-sm); padding: 0.55rem 0.75rem;
    font-size: 0.933rem; font-weight: 500; display: flex; align-items: center; gap: 0.7rem; transition: background .12s ease, color .12s ease;
}
.nav-sidebar .nav-link p { margin: 0; white-space: nowrap; }
.nav-sidebar .nav-link .nav-count { margin-left: auto; font-size: 0.8rem; font-weight: 600; line-height: 1; padding: 0.22rem 0.5rem; border-radius: 999px; background: rgba(148, 163, 184, 0.16); color: var(--sm-sidebar-text); font-variant-numeric: tabular-nums; }
.nav-sidebar .nav-link.active .nav-count { background: rgba(59, 130, 246, 0.35); color: #fff; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link .nav-count { display: none; }
.nav-sidebar .nav-link .nav-icon {
    width: 1.35rem; margin: 0; font-size: 0.95rem; text-align: center; color: var(--sm-sidebar-muted); transition: color .12s ease;
}
.nav-sidebar .nav-link:hover { background: var(--sm-sidebar-hover) !important; color: #fff !important; }
.nav-sidebar .nav-link:hover .nav-icon { color: #e2e8f0; }
.nav-sidebar > .nav-item > .nav-link.active, .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: var(--sm-sidebar-active) !important; color: #fff !important; box-shadow: none !important; position: relative;
}
.nav-sidebar .nav-link.active .nav-icon { color: #60a5fa; }
.nav-sidebar > .nav-item > .nav-link.active::before {
    content: ''; position: absolute; left: -0.75rem; top: 0.55rem; bottom: 0.55rem; width: 3px; border-radius: 0 3px 3px 0; background: #60a5fa;
}
.nav-sidebar .nav-link .badge { margin-left: auto; font-weight: 500; }
.nav-sidebar .nav-link .nav-count {
    margin-left: auto; font-size: 0.8rem; color: var(--sm-sidebar-muted); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 0.1rem 0.5rem;
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-header,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-count { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-text { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link.active::before { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link { justify-content: center; padding: 0; }
.main-sidebar .sidebar-foot {
    margin-top: 1.5rem; padding: 0.75rem; border-top: 1px solid rgba(255,255,255,0.06); color: var(--sm-sidebar-muted); font-size: 0.8rem; line-height: 1.5;
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .sidebar-foot { display: none; }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */
.content-header { padding: 1.5rem 1.5rem 1.1rem; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-header .page-titles { min-width: 0; }
.page-header .breadcrumb {
    background: none; padding: 0; margin: 0 0 0.35rem; font-size: 0.8rem; color: var(--sm-muted);
}
.page-header .breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--sm-faint); padding: 0 0.4rem; }
.page-header .breadcrumb-item a { color: var(--sm-muted); }
.page-header .breadcrumb-item a:hover { color: var(--sm-primary); }
.page-header .breadcrumb-item.active { color: var(--sm-text-2); }
.page-header h1 { font-size: 1.55rem; font-weight: 650; margin: 0; line-height: 1.25; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.page-header .page-subtitle { color: var(--sm-muted); margin: 0.3rem 0 0; font-size: 0.933rem; max-width: 70ch; }
.page-header .page-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.page-title-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 0.55rem;
    font-size: 0.8rem; font-weight: 600; color: var(--sm-success); background: var(--sm-success-soft); border-radius: 999px; line-height: 1;
}
.page-title-wrap { min-height: 0; }
/* Page-title picker (layouts/header.php): looks like the title, opens a filterable list */
.title-picker { position: relative; display: inline-flex; align-items: baseline; max-width: 100%; }
.title-picker-btn { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 .1rem 0 0; color: var(--sm-text); font: inherit; font-weight: 650; font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.01em; cursor: pointer; border-radius: 0; }
.title-picker-btn .title-picker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-picker-btn .fa-chevron-down { font-size: .8rem; color: var(--sm-muted); flex: 0 0 auto; }
.title-picker-btn:hover { border-bottom-color: var(--sm-border-strong); }
.title-picker-btn:focus { outline: none; border-bottom-color: var(--sm-primary); }
.title-picker.show .title-picker-btn .fa-chevron-down { transform: rotate(180deg); }
.title-picker-menu { min-width: 340px; max-width: min(520px, calc(100vw - 2rem)); padding: .4rem 0 .25rem; border: 1px solid var(--sm-card-border); border-radius: .5rem; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); font-size: 0.933rem; }
.title-picker-filter { margin: 0 .6rem .4rem; width: calc(100% - 1.2rem); }
.title-picker-list { max-height: 22rem; overflow-y: auto; }
.title-picker-item { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 1rem; white-space: normal; }
.title-picker-item[hidden] { display: none; }
.title-picker-item .title-picker-label { flex: 1 1 auto; }
.title-picker-item .title-picker-sub { flex: 0 0 auto; font-size: 0.8rem; color: var(--sm-muted); font-variant-numeric: tabular-nums; }
.title-picker-item.active, .title-picker-item.active .title-picker-sub { color: #fff; }
.title-picker-item.active { background: var(--sm-primary); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--sm-card-border) !important; border-radius: var(--sm-radius) !important; box-shadow: var(--sm-shadow) !important;
    background: var(--sm-surface); margin-bottom: 1.25rem;
}
.card.card-outline, .card.card-primary, .card.card-info, .card.card-success, .card.card-warning, .card.card-danger { border-top-width: 1px !important; }
.card-primary.card-outline, .card-info.card-outline { border-top-color: var(--sm-border) !important; }
.card-primary:not(.card-outline) > .card-header, .card-info:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header, .card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header, .card-secondary:not(.card-outline) > .card-header { background: var(--sm-card-head) !important; color: var(--sm-text) !important; }
.card-primary:not(.card-outline) > .card-header .card-title, .card-info:not(.card-outline) > .card-header .card-title { color: var(--sm-text) !important; }
.card-header::after, .card-header::before { display: none !important; content: none !important; }
.card-header > .card-tools, .card-header > .ml-auto, .card-header > .card-actions { margin-left: auto !important; }
.card-header > .card-tools { float: none !important; margin-right: 0 !important; display: flex; align-items: center; gap: 0.5rem; }
.card-header {
    background: var(--sm-card-head) !important; border-bottom: 1px solid var(--sm-card-border) !important; padding: 0.9rem 1.15rem;
    border-radius: var(--sm-radius) var(--sm-radius) 0 0 !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.card-header .card-title { font-size: 0.933rem; font-weight: 600; margin: 0; color: var(--sm-text); float: none; }
.card-header .card-tools { margin: 0; float: none; display: flex; gap: 0.4rem; align-items: center; }
.card-body { padding: 1.15rem; }
.card-footer { background: #fafbfd !important; border-top: 1px solid var(--sm-border) !important; border-radius: 0 0 var(--sm-radius) var(--sm-radius) !important; }
.card > .card-header + .card-body { border-radius: 0 0 var(--sm-radius) var(--sm-radius); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--sm-radius-sm); font-weight: 500; font-size: 0.933rem; padding: 0.48rem 0.9rem; box-shadow: none !important;
    transition: background .12s ease, border-color .12s ease, color .12s ease, transform .05s ease; letter-spacing: 0;
}
.btn:active { transform: translateY(0.5px); }
.btn-sm, .btn-group-sm > .btn { padding: 0.32rem 0.65rem; font-size: 0.867rem; border-radius: 7px; }
.btn-xs { padding: 0.15rem 0.45rem; font-size: 0.8rem; border-radius: 6px; }
.btn-lg { padding: 0.65rem 1.2rem; font-size: 1rem; }
.btn i.fas, .btn i.far { font-size: 0.9em; }
.btn-primary { background: var(--sm-primary) !important; border-color: var(--sm-primary) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--sm-primary-600) !important; border-color: var(--sm-primary-600) !important; }
.btn-secondary, .btn-default { background: var(--sm-surface) !important; border-color: var(--sm-border-strong) !important; color: var(--sm-text-2) !important; }
.btn-secondary:hover, .btn-default:hover { background: var(--sm-bg) !important; color: var(--sm-text) !important; }
.btn-light { background: var(--sm-bg) !important; border-color: var(--sm-bg) !important; color: var(--sm-text-2) !important; }
.btn-light:hover { background: #e9edf5 !important; }
.btn-success { background: var(--sm-success) !important; border-color: var(--sm-success) !important; }
.btn-success:hover { background: #047857 !important; border-color: #047857 !important; }
.btn-info { background: var(--sm-info) !important; border-color: var(--sm-info) !important; color: #fff !important; }
.btn-info:hover { background: #0e7490 !important; border-color: #0e7490 !important; }
.btn-warning { background: var(--sm-warning) !important; border-color: var(--sm-warning) !important; color: #fff !important; }
.btn-warning:hover { background: #b45309 !important; border-color: #b45309 !important; color: #fff !important; }
.btn-danger { background: var(--sm-danger) !important; border-color: var(--sm-danger) !important; }
.btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
.btn-outline-primary { color: var(--sm-primary) !important; border-color: var(--sm-primary-200) !important; background: #fff !important; }
.btn-outline-primary:hover { background: var(--sm-primary-soft) !important; }
.btn-outline-secondary { color: var(--sm-text-2) !important; border-color: var(--sm-border-strong) !important; background: #fff !important; }
.btn-outline-secondary:hover, .btn-outline-secondary.active { background: var(--sm-bg) !important; color: var(--sm-text) !important; }
.btn-outline-info { color: var(--sm-info) !important; border-color: #a5dbe6 !important; background: #fff !important; }
.btn-outline-info:hover { background: var(--sm-info-soft) !important; }
.btn-outline-danger { color: var(--sm-danger) !important; border-color: #f3b4b4 !important; background: #fff !important; }
.btn-outline-danger:hover { background: var(--sm-danger-soft) !important; }
.btn-outline-success { color: var(--sm-success) !important; border-color: #a7dcc6 !important; background: #fff !important; }
.btn-outline-success:hover { background: var(--sm-success-soft) !important; }
.btn-outline-warning { color: var(--sm-warning) !important; border-color: #f5cf95 !important; background: #fff !important; }
.btn-outline-warning:hover { background: var(--sm-warning-soft) !important; }
.btn-link { color: var(--sm-primary) !important; }
.btn-group > .btn { border-radius: var(--sm-radius-sm); }
.btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-icon { width: 32px; height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; }
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* row action clusters inside tables: quiet, compact, tinted on hover */
.table .row-actions, .row-actions { display: inline-flex; gap: 0.25rem; flex-wrap: nowrap; align-items: center; }
.row-actions .btn {
    background: var(--sm-surface) !important; border: 1px solid var(--sm-border) !important; color: var(--sm-text-2) !important;
    padding: 0.28rem 0.55rem; font-size: 0.8rem; border-radius: 7px; white-space: nowrap;
}
.row-actions .btn:hover { border-color: var(--sm-border-strong) !important; background: var(--sm-bg) !important; color: var(--sm-text) !important; }
.row-actions .btn.btn-danger, .row-actions .btn.btn-outline-danger { color: var(--sm-danger) !important; }
.row-actions .btn.btn-danger:hover, .row-actions .btn.btn-outline-danger:hover { background: var(--sm-danger-soft) !important; border-color: #f3b4b4 !important; }
.row-actions .btn.btn-primary, .row-actions .btn.btn-info { color: var(--sm-primary) !important; }
.row-actions .btn.btn-primary:hover, .row-actions .btn.btn-info:hover { background: var(--sm-primary-soft) !important; border-color: #bfd0fb !important; }
.row-actions .btn.btn-success { color: var(--sm-success) !important; }
.row-actions .btn.btn-success:hover { background: var(--sm-success-soft) !important; }
.row-actions .btn.btn-warning { color: var(--sm-warning) !important; }
.row-actions .btn.btn-warning:hover { background: var(--sm-warning-soft) !important; }
.row-actions .btn.btn-secondary { color: var(--sm-text-2) !important; }

/* --------------------------------------------------------------------------
   Badges & status
   -------------------------------------------------------------------------- */
.badge { font-weight: 500; border-radius: 999px; padding: 0.3em 0.65em; font-size: 0.8rem; letter-spacing: 0; }
.badge-primary { background: var(--sm-primary-soft); color: var(--sm-primary-600); }
.badge-success { background: var(--sm-success-soft); color: var(--sm-success); }
.badge-info { background: var(--sm-info-soft); color: var(--sm-info); }
.badge-warning { background: var(--sm-warning-soft); color: #92400e; }
.badge-danger { background: var(--sm-danger-soft); color: var(--sm-danger); }
.badge-secondary, .badge-light { background: #eef1f6; color: var(--sm-text-2); }
.badge-dark { background: #1f2937; color: #fff; }
.badge-purple { background: var(--sm-purple-soft); color: var(--sm-purple); }
/* Quiet status badges, used across lists, cards and logs. */
.badge-soft { font-weight: 600; font-size: 0.8rem; padding: 0.25rem 0.5rem; border-radius: 999px; letter-spacing: 0.01em; }
.badge-soft-primary { background: var(--sm-primary-soft); color: var(--sm-primary-600); }
.badge-soft-success { background: var(--sm-success-soft); color: var(--sm-success); }
.badge-soft-warning { background: var(--sm-warning-soft); color: #92400e; }
.badge-soft-info { background: var(--sm-info-soft); color: var(--sm-info); }
.badge-soft-secondary { background: var(--sm-bg); color: var(--sm-text-2); border: 1px solid var(--sm-border); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.sm-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8rem; color: var(--sm-muted); align-items: center; }
.sm-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 0.35rem; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table { color: var(--sm-text); margin-bottom: 0; }
.table th, .table td { border-top: 1px solid var(--sm-border); padding: 0.7rem 0.85rem; vertical-align: middle; }
.table thead th, .table thead.thead-dark th, .table thead.thead-light th, .table .thead-dark th, .table-dark thead th, .table > thead > tr > th {
    background: #f8fafc !important; color: var(--sm-text-2) !important; font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; border-bottom: 1px solid var(--sm-border) !important; border-top: none; white-space: nowrap;
}
.table thead th.th-wrap { white-space: normal; }
.recruit-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 580px), 1fr)); gap: 0 1.25rem; align-items: start; }
.table.table-dark { background: var(--sm-surface); color: var(--sm-text); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--sm-border); }
.table-striped tbody tr:nth-of-type(odd) { background: #fbfcfe; }
.table-hover tbody tr:hover { background: #f3f6fb; }
.table thead th.sorting, .table thead th.sorting_asc, .table thead th.sorting_desc { cursor: pointer; }
.table thead tr.filters th, .table thead tr:nth-child(2) th { text-transform: none; letter-spacing: 0; font-weight: 500; background: #fff !important; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.table thead select.form-control, .table thead .custom-select, .table thead input.form-control { font-size: 0.867rem; height: 34px; }
.table td .badge-pill.badge-warning, .table td .subject-pill { font-weight: 600; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: 0.867rem; color: var(--sm-muted); padding-top: 0.6rem; }
.dataTables_wrapper .dataTables_filter input { border: 1px solid var(--sm-border-strong); border-radius: var(--sm-radius-sm); padding: 0.35rem 0.6rem; margin-left: 0.5rem; background: #fff; }
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--sm-border-strong); border-radius: 7px; padding: 0.25rem 1.5rem 0.25rem 0.5rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 7px !important; border: 1px solid transparent !important; padding: 0.3rem 0.7rem !important; margin: 0 2px; background: transparent !important; color: var(--sm-text-2) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--sm-bg) !important; border-color: var(--sm-border) !important; color: var(--sm-text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--sm-primary) !important; color: #fff !important; border-color: var(--sm-primary) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.45; }
/* Sort indicator: one arrow right after the label instead of two at the far edge of the column */
table.dataTable > thead > tr > th:not(.sorting_disabled), table.dataTable > thead > tr > td:not(.sorting_disabled) { padding-right: 0.75rem; }
table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc_disabled:before { display: none; }
table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:after { position: static; display: inline-block; margin-left: 0.4em; content: "\2195"; font-size: 0.85em; line-height: 1; opacity: 0.35; vertical-align: 0.05em; }
table.dataTable > thead .sorting_asc:after { content: "\2191"; opacity: 1; color: var(--sm-primary); }
table.dataTable > thead .sorting_desc:after { content: "\2193"; opacity: 1; color: var(--sm-primary); }
table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:after { display: none; }
.pagination .page-link { border-color: var(--sm-border); color: var(--sm-text-2); border-radius: 7px !important; margin: 0 2px; }
.pagination .page-item.active .page-link { background: var(--sm-primary); border-color: var(--sm-primary); color: #fff; }
.table-responsive { border-radius: var(--sm-radius-sm); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
label, .col-form-label { font-weight: 500; color: var(--sm-text-2); font-size: 0.867rem; }
.form-control, .custom-select, .select2-container--bootstrap4 .select2-selection {
    border-radius: var(--sm-radius-sm) !important; border: 1px solid var(--sm-border-strong); font-size: 0.933rem; color: var(--sm-text); background-color: #fff;
    min-height: 38px; transition: border-color .12s ease, box-shadow .12s ease; box-shadow: none;
}
.form-control:focus, .custom-select:focus, .select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--sm-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; outline: none;
}
.form-control-sm, .custom-select-sm { min-height: 32px; font-size: 0.867rem; border-radius: 7px !important; }
.form-control:disabled, .form-control[readonly] { background: #f3f4f6; color: var(--sm-muted); }
.form-control::placeholder { color: var(--sm-faint); }
.input-group-text { border-radius: var(--sm-radius-sm); border-color: var(--sm-border-strong); background: #f8fafc; color: var(--sm-muted); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--sm-primary); border-color: var(--sm-primary); }
.custom-switch .custom-control-label::before { border-radius: 999px; }
.form-text, .help-block { color: var(--sm-muted); font-size: 0.8rem; }
.invalid-feedback { font-size: 0.8rem; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--sm-danger); }
.form-group { margin-bottom: 1rem; }
fieldset legend { font-size: 0.933rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Alerts, modals, tabs, misc components
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--sm-radius); border: 1px solid transparent; font-size: 0.933rem; padding: 0.75rem 1rem; }
.alert-success { background: var(--sm-success-soft); color: #065f46; border-color: #b7e4cf; }
.alert-danger { background: var(--sm-danger-soft); color: #991b1b; border-color: #f5c2c2; }
.alert-warning { background: var(--sm-warning-soft); color: #92400e; border-color: #f7dcb0; }
.alert-info { background: var(--sm-info-soft); color: #155e75; border-color: #b6e1eb; }
.alert-primary { background: var(--sm-primary-soft); color: var(--sm-primary-600); border-color: #c7d7fb; }
.alert .close { color: inherit; opacity: 0.6; }
.modal-content { border: none; border-radius: 14px; box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18); }
.modal-header { border-bottom: 1px solid var(--sm-border); padding: 1rem 1.25rem; }
.modal-header .modal-title { font-weight: 600; font-size: 1.067rem; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--sm-border); padding: 0.85rem 1.25rem; background: #fafbfd; border-radius: 0 0 14px 14px; }
.modal-header.bg-primary, .modal-header.bg-info, .modal-header.bg-success, .modal-header.bg-danger, .modal-header.bg-warning { background: var(--sm-surface) !important; color: var(--sm-text) !important; }
.modal-header.bg-primary .close, .modal-header.bg-info .close { color: var(--sm-text); text-shadow: none; }
.nav-tabs { border-bottom: 1px solid var(--sm-border); }
.nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--sm-muted); font-weight: 500; padding: 0.6rem 0.9rem; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--sm-text); border-bottom-color: var(--sm-border-strong); }
.nav-tabs .nav-link.active { color: var(--sm-primary) !important; border-bottom-color: var(--sm-primary) !important; background: transparent; }
.nav-pills .nav-link { border-radius: var(--sm-radius-sm); color: var(--sm-text-2); font-weight: 500; }
.nav-pills .nav-link.active { background: var(--sm-primary-soft); color: var(--sm-primary-600); }
.dropdown-menu { border: 1px solid var(--sm-border); border-radius: var(--sm-radius); box-shadow: var(--sm-shadow-md); padding: 0.35rem; }
.dropdown-item { border-radius: 7px; font-size: 0.933rem; padding: 0.45rem 0.75rem; color: var(--sm-text-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sm-bg); color: var(--sm-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--sm-primary-soft); color: var(--sm-primary-600); }
.tooltip-inner { background: #111827; border-radius: 6px; font-size: 0.8rem; padding: 0.35rem 0.6rem; }
.bs-tooltip-top .arrow::before { border-top-color: #111827; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #111827; }
.list-group-item { border-color: var(--sm-border); color: var(--sm-text); }
.list-group-item.active { background: var(--sm-primary-soft); border-color: var(--sm-primary-soft); color: var(--sm-primary-600); }
.progress { border-radius: 999px; background: #eef1f6; height: 8px; }
.progress-bar { background: var(--sm-primary); }
hr { border-color: var(--sm-border); }
.text-primary { color: var(--sm-primary) !important; }
.text-success { color: var(--sm-success) !important; }
.text-danger { color: var(--sm-danger) !important; }
.text-warning { color: var(--sm-warning) !important; }
.text-info { color: var(--sm-info) !important; }
.bg-light { background: var(--sm-bg) !important; }
.border { border-color: var(--sm-border) !important; }
.callout { border-radius: var(--sm-radius); border-left-width: 3px; background: var(--sm-surface); box-shadow: var(--sm-shadow); border: 1px solid var(--sm-border); }
.callout.callout-info { border-left-color: var(--sm-info); }
.callout.callout-warning { border-left-color: var(--sm-warning); }
.callout.callout-danger { border-left-color: var(--sm-danger); }
.callout.callout-success { border-left-color: var(--sm-success); }

/* --------------------------------------------------------------------------
   Empty state, KPI tiles, simple bar lists (dashboard, analytics)
   -------------------------------------------------------------------------- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--sm-muted); }
.empty-state i { font-size: 1.8rem; color: var(--sm-faint); margin-bottom: 0.6rem; display: block; }
.empty-state .title { font-weight: 600; color: var(--sm-text-2); margin-bottom: 0.25rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi {
    display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.15rem; background: var(--sm-surface); border: 1px solid var(--sm-card-border);
    border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); color: inherit; text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease;
}
a.kpi:hover { border-color: #c7d2e5; box-shadow: var(--sm-shadow-md); color: inherit; }
.kpi .kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: 0 0 44px; }
.kpi .kpi-value { font-size: 1.55rem; font-weight: 650; line-height: 1.1; color: var(--sm-text); letter-spacing: -0.02em; }
.kpi .kpi-label { font-size: 0.8rem; color: var(--sm-muted); margin-top: 2px; }
.kpi .kpi-meta { margin-left: auto; font-size: 0.8rem; color: var(--sm-faint); }
.bg-soft-primary { background: var(--sm-primary-soft); color: var(--sm-primary-600); }
.bg-soft-success { background: var(--sm-success-soft); color: var(--sm-success); }
.bg-soft-warning { background: var(--sm-warning-soft); color: var(--sm-warning); }
.bg-soft-info { background: var(--sm-info-soft); color: var(--sm-info); }
.bg-soft-danger { background: var(--sm-danger-soft); color: var(--sm-danger); }
.bg-soft-purple { background: var(--sm-purple-soft); color: var(--sm-purple); }
.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.5rem 0; }
.bar-list li + li { border-top: 1px solid var(--sm-border); }
.bar-list .bar-label { font-size: 0.933rem; font-weight: 500; color: var(--sm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-list .bar-sub { font-size: 0.8rem; color: var(--sm-muted); }
.bar-list .bar-count { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sm-text); font-size: 0.933rem; }
.bar-list .bar-track { grid-column: 1 / -1; height: 6px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.bar-list .bar-fill { display: block; height: 100%; min-width: 2px; border-radius: 999px; background: var(--sm-primary); }
/* A study with no planned size can only be drawn against the largest study, which is a relative comparison rather than progress. Same hue, lighter: a missing target is not a disabled row. */
.bar-list .bar-fill.is-relative { background: var(--sm-primary-200); }
.bar-list .bar-target { font-weight: 400; color: var(--sm-muted); }
.timeline-list { list-style: none; margin: 0; padding: 0; }
.timeline-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; }
.timeline-list li + li { border-top: 1px solid var(--sm-border); }
.timeline-list .tl-id { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.867rem; color: var(--sm-primary-600); background: var(--sm-primary-soft); border-radius: 6px; padding: 0.15rem 0.45rem; }
.timeline-list .tl-main { flex: 1; min-width: 0; font-size: 0.867rem; color: var(--sm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-list .tl-sub { font-size: 0.8rem; color: var(--sm-muted); }
.timeline-list .tl-date { font-size: 0.8rem; color: var(--sm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.quick-actions { display: grid; gap: 0.5rem; }
.quick-actions a {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm);
    color: var(--sm-text); font-weight: 500; font-size: 0.933rem; background: #fff; transition: border-color .12s ease, background .12s ease;
}
.quick-actions a:hover { background: var(--sm-bg); border-color: var(--sm-border-strong); }
.quick-actions a i:first-child { width: 1.4rem; text-align: center; color: var(--sm-primary); }
.quick-actions a i:last-child { margin-left: auto; color: var(--sm-faint); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Studies cards (subjects/studies.php)
   -------------------------------------------------------------------------- */
/* ---- Study / center cards --------------------------------------------- */
.study-card-col { margin-bottom: 1.25rem; }
.study-card { display: flex; flex-direction: column; height: 100%; background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: var(--sm-radius); transition: box-shadow .15s ease, border-color .15s ease; }
.study-card:hover { box-shadow: var(--sm-shadow-md); border-color: #c7d2e5; }
.study-card.study-card-warn { border-color: #f5d58a; }
.study-card-head { padding: 0.9rem 1.15rem 0.8rem; background: linear-gradient(180deg, var(--sm-primary-soft) 0%, #f3f6fd 100%); border-bottom: 1px solid var(--sm-border); border-radius: var(--sm-radius) var(--sm-radius) 0 0; box-shadow: inset 4px 0 0 var(--sm-primary); }
/* Status colours: the header band and the accent follow the study / centre status */
.study-card.status-active .study-card-head { background: linear-gradient(180deg, #e6f7f0 0%, #f2fbf6 100%); box-shadow: inset 4px 0 0 var(--sm-success); }
.study-card.status-draft .study-card-head { background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%); box-shadow: inset 4px 0 0 #64748b; }
.study-card.status-pending .study-card-head, .study-card.status-planned .study-card-head { background: linear-gradient(180deg, #fdf3e3 0%, #fef9f0 100%); box-shadow: inset 4px 0 0 var(--sm-warning); }
.study-card.status-hold .study-card-head, .study-card.status-on-hold .study-card-head { background: linear-gradient(180deg, #ffedd5 0%, #fff7ed 100%); box-shadow: inset 4px 0 0 #f97316; }
.study-card.status-done .study-card-head, .study-card.status-completed .study-card-head { background: linear-gradient(180deg, var(--sm-primary-soft) 0%, #f3f6fd 100%); box-shadow: inset 4px 0 0 var(--sm-primary); }
.study-card.status-closed .study-card-head, .study-card.status-stopped .study-card-head, .study-card.status-terminated .study-card-head { background: linear-gradient(180deg, #fdecec 0%, #fef5f5 100%); box-shadow: inset 4px 0 0 var(--sm-danger); }
.study-card.status-archived .study-card-head { background: linear-gradient(180deg, #e2e8f0 0%, #f1f5f9 100%); box-shadow: inset 4px 0 0 #475569; }
.study-card.status-other .study-card-head { background: linear-gradient(180deg, #ede9fe 0%, #f5f3ff 100%); box-shadow: inset 4px 0 0 var(--sm-purple); }
.study-card.study-card-warn .study-card-head { box-shadow: inset 4px 0 0 var(--sm-warning); }
.study-card-code { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sm-primary-600); background: var(--sm-surface); border: 1px solid #c7d2e5; border-radius: 6px; padding: 0.15rem 0.5rem; white-space: nowrap; }
.centers-view.view-rows .study-card-head { border-bottom: 0; border-radius: var(--sm-radius) 0 0 var(--sm-radius); }
.study-card-id { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.study-card-name { font-weight: 700; font-size: 1.067rem; color: var(--sm-text); letter-spacing: -0.01em; }
.study-card-name:hover { color: var(--sm-primary); text-decoration: none; }
.study-card-phase { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--sm-text-2); background: var(--sm-bg); border: 1px solid var(--sm-border); border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; }
.study-card-title { font-size: 0.867rem; font-weight: 450; color: var(--sm-text-2); margin: 0 0 0.45rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.55em; }
.study-card-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.4rem; font-size: 0.8rem; color: var(--sm-muted); }
.study-card-meta .sep { color: var(--sm-faint); }
.study-card-body { padding: 0.85rem 1.15rem; border-top: 1px solid var(--sm-border); background: var(--sm-bg); }
.study-card-hero { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.8rem; min-height: 40px; }
.study-card-hero .hero-count { display: flex; flex-direction: column; line-height: 1; color: inherit; text-decoration: none; flex: 0 0 auto; }
.study-card-hero .hero-count:hover .hero-value { color: var(--sm-primary); }
.study-card-hero .hero-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--sm-text); }
.study-card-hero .hero-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sm-muted); margin-top: 3px; }
.study-card-hero .sparkline { flex: 0 0 110px; width: 110px; height: 36px; }
.study-card-hero .hero-pulse { display: flex; flex-direction: column; min-width: 0; font-size: 0.8rem; line-height: 1.35; margin-left: auto; text-align: right; }
.study-card-hero .pulse-main { color: var(--sm-text); font-weight: 600; white-space: nowrap; }
.study-card-hero .pulse-main.is-quiet { color: var(--sm-muted); font-weight: 500; white-space: normal; }
.study-card-hero .pulse-sub { color: var(--sm-muted); }
.study-card-bars { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; column-gap: 0.6rem; row-gap: 0.45rem; font-size: 0.8rem; color: var(--sm-muted); }
.study-card-bars .bar-row { display: contents; }
.study-card-bars .bar-label { font-weight: 500; color: var(--sm-text-2); }
.study-card-bars .bar-track { display: block; height: 6px; border-radius: 999px; background: var(--sm-surface); border: 1px solid var(--sm-border); overflow: hidden; }
.study-card-bars .bar-track span { display: block; height: 100%; border-radius: 999px; background: var(--sm-success); }
.study-card-bars .bar-period .bar-track span { background: var(--sm-primary); }
.study-card-bars .is-done .bar-track span, .study-card-bars .is-empty .bar-track span { background: var(--sm-faint); }
.study-card-bars .is-overdue .bar-track span { background: var(--sm-warning); }
.study-card-bars .is-closed .bar-track span { background: var(--sm-faint); }
.study-card-bars .bar-value { white-space: nowrap; text-align: right; }
.study-card-bars .bar-value strong { color: var(--sm-text); font-weight: 650; }
.study-card-bars .is-empty .bar-value { font-style: italic; }
.study-card-foot { margin-top: auto; padding: 0.7rem 1.15rem; border-top: 1px solid var(--sm-border); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.study-card-facts { display: flex; align-items: center; gap: 0.85rem; min-width: 0; font-size: 0.8rem; color: var(--sm-text-2); }
.study-card-facts .fact { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; color: inherit; text-decoration: none; }
.study-card-facts .fact i { color: var(--sm-faint); font-size: 0.8rem; }
.study-card-facts .fact-warn, .study-card-facts .fact-warn i { color: var(--sm-warning); }
.study-card-facts a.fact-queries { color: var(--sm-danger); font-weight: 600; }
.study-card-facts a.fact-queries i { color: var(--sm-danger); }
.study-card-facts .fact-pi { min-width: 0; max-width: 200px; }
.study-card-facts .fact-pi .fact-text { overflow: hidden; text-overflow: ellipsis; }
.study-card-facts .fact-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.avatar-initials.fact-avatar { font-size: 0.6rem; }
/* Shared with the centres directory and the overview period KPI */
.study-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); border-top: 1px solid var(--sm-border); border-bottom: 1px solid var(--sm-border); background: var(--sm-bg); }
.study-card-stats .stat { padding: 0.6rem 0.5rem; text-align: center; display: flex; flex-direction: column; justify-content: center; color: inherit; text-decoration: none; min-width: 0; }
.study-card-stats .stat + .stat { border-left: 1px solid var(--sm-border); }
.study-card-stats a.stat:hover { background: var(--sm-primary-soft); }
.study-card-stats .stat-value { font-weight: 650; font-size: 1.067rem; line-height: 1.1; color: var(--sm-text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.study-card-stats .stat-label { font-size: 0.8rem; color: var(--sm-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.study-card-stats .stat-dates .stat-value { font-size: 0.867rem; }
.study-card-stats .stat-dates .stat-label { white-space: normal; text-transform: none; letter-spacing: 0; }
.study-card-stats .stat-warn .stat-value { color: var(--sm-warning); }
.study-card-stats .stat-chart { grid-column: span 2; padding: 0.35rem 0.6rem; position: relative; }
.study-card-stats .stat-chart canvas { width: 100% !important; height: 48px !important; }
.centers-grid .study-card-stats { grid-template-columns: minmax(104px, 27%) minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
.centers-grid .study-card-stats .stat:not(.stat-chart) { grid-column: 1; padding: 0.5rem 0.5rem; }
.centers-grid .study-card-stats .stat + .stat:not(.stat-chart) { border-left: 0; border-top: 1px solid var(--sm-border); }
.centers-grid .study-card-stats .stat-chart { grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--sm-border); padding: 0.5rem 0.75rem; min-height: 104px; }
.centers-grid .study-card-stats .stat-chart canvas { display: block; height: 100% !important; }
.study-card-desc { padding: 0.75rem 1.15rem 0; margin: 0; font-size: 0.867rem; color: var(--sm-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.study-card-timeline { padding: 0.6rem 1.15rem 0; }
.study-card-timeline .timeline-bar { height: 5px; border-radius: 999px; background: var(--sm-bg); border: 1px solid var(--sm-border); overflow: hidden; }
.study-card-timeline .timeline-bar span { display: block; height: 100%; background: var(--sm-primary); border-radius: 999px; }
.study-card-timeline.is-done .timeline-bar span { background: var(--sm-faint); }
.study-card-timeline.is-overdue .timeline-bar span { background: var(--sm-warning); }
.study-card-timeline .timeline-text { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: var(--sm-muted); margin-top: 0.3rem; }
.studies-view.view-rows .study-card-col { flex: 0 0 100%; max-width: 100%; margin-bottom: 0.5rem; }
.studies-view.view-rows .study-card { flex-direction: row; align-items: center; }
.studies-view.view-rows .study-card-head { flex: 1 1 40%; padding: 0.7rem 1rem; min-width: 0; }
.studies-view.view-rows .study-card-title { -webkit-line-clamp: 1; margin-bottom: 0.2rem; min-height: 0; }
.studies-view.view-rows .study-card-body { flex: 0 0 auto; width: 440px; border-top: 0; border-left: 1px solid var(--sm-border); padding: 0.55rem 1rem; display: flex; align-items: center; gap: 1rem; }
.studies-view.view-rows .study-card-hero { flex: 0 0 auto; margin: 0; gap: 0.6rem; }
.studies-view.view-rows .study-card-hero .sparkline, .studies-view.view-rows .hero-pulse .pulse-sub { display: none !important; }
.studies-view.view-rows .study-card-hero .hero-pulse { margin-left: 0; text-align: left; }
.studies-view.view-rows .study-card-bars { flex: 1 1 auto; gap: 0.25rem; }
.studies-view.view-rows .study-card-bars .bar-label { display: none; }
.studies-view.view-rows .study-card-bars { grid-template-columns: minmax(0, 1fr) max-content; }
.studies-view.view-rows .study-card-foot { margin: 0; padding: 0.7rem 1rem; border-top: 0; border-left: 1px solid var(--sm-border); flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.studies-view.view-rows .study-card-facts .fact-text { display: none; }
/* Centres directory, list mode: one row per centre, counts and accrual in the middle, actions on the right */
.centers-view.view-rows .study-card-col { flex: 0 0 100%; max-width: 100%; margin-bottom: 0.5rem; }
.centers-view.view-rows .study-card { flex-direction: row; align-items: stretch; }
.centers-view.view-rows .study-card-head { flex: 1 1 40%; padding: 0.7rem 1rem; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.centers-view.view-rows .study-card-id { margin-bottom: 0.15rem; }
.centers-view.view-rows .study-card-stats { flex: 0 0 auto; width: 380px; border-top: 0; border-bottom: 0; border-left: 1px solid var(--sm-border); grid-template-columns: 96px 96px minmax(0, 1fr); grid-template-rows: 1fr; }
.centers-view.view-rows .study-card-stats .stat:not(.stat-chart) { grid-column: auto; grid-row: 1; padding: 0.45rem 0.5rem; border-top: 0; }
.centers-view.view-rows .study-card-stats .stat + .stat:not(.stat-chart) { border-left: 1px solid var(--sm-border); border-top: 0; }
.centers-view.view-rows .study-card-stats .stat-chart { grid-column: 3; grid-row: 1; min-height: 0; padding: 0.35rem 0.6rem; }
.centers-view.view-rows .study-card-desc { display: none; }
.centers-view.view-rows .study-card-foot { margin: 0; padding: 0.7rem 1rem; border-top: 0; border-left: 1px solid var(--sm-border); align-items: center; }
@media (max-width: 1199.98px) { .centers-view.view-rows .study-card { flex-wrap: wrap; } .centers-view.view-rows .study-card-stats { flex-basis: 100%; width: auto; border-left: 0; border-top: 1px solid var(--sm-border); } .centers-view.view-rows .study-card-foot { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--sm-border); } }
@media (max-width: 1199.98px) { .studies-view.view-rows .study-card { flex-wrap: wrap; } .studies-view.view-rows .study-card-body { flex-basis: 100%; width: auto; border-left: 0; border-top: 1px solid var(--sm-border); } .studies-view.view-rows .study-card-foot { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--sm-border); flex-direction: row; align-items: center; } }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.main-footer {
    background: transparent !important; border-top: 1px solid var(--sm-border) !important; color: var(--sm-muted); font-size: 0.8rem;
    padding: 0.9rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.main-footer a { color: var(--sm-text-2); font-weight: 500; }
.main-footer a:hover { color: var(--sm-primary); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .content-header { padding: 1.1rem 1rem 0.8rem; }
    .content-wrapper > .content { padding: 0 1rem 1rem; }
    .main-header.navbar { padding-right: 1rem; }
    .page-header h1 { font-size: 1.3rem; }
    .title-picker-btn { font-size: 1.3rem; }
    .topbar-crumbs { display: none; }
}
@media (max-width: 575.98px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .kpi { padding: 0.8rem; gap: 0.6rem; }
    .kpi .kpi-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 0.95rem; }
    .kpi .kpi-value { font-size: 1.25rem; }
    .card-header { padding: 0.75rem 0.9rem; }
    .card-body { padding: 0.9rem; }
}
@media print {
    .main-sidebar, .main-header, .main-footer, .page-actions, .row-actions { display: none !important; }
    .content-wrapper { margin: 0 !important; background: #fff !important; }
    .card { box-shadow: none !important; border-color: #ccc !important; }
}

/* ---- Forms management ------------------------------------------------- */
.font-weight-600 { font-weight: 600; }
.forms-table td { vertical-align: middle; }
.forms-table .study-assign { max-width: 320px; }
.forms-table .study-assign.is-template { color: var(--sm-muted); border-style: dashed; }
.forms-table .study-assign.is-assigned { border-color: #bfd0fb; background-color: #f5f8ff; }
.forms-table code { font-size: 0.8rem; color: var(--sm-text-2); background: var(--sm-bg); padding: 0.05rem 0.35rem; border-radius: 4px; }
.forms-table tbody tr[hidden] { display: none; }
.card > .table-responsive > .table { margin-bottom: 0; }
.card > .table-responsive > .table thead th { border-top: 0; }
/* Label and input layout on the subject forms page: a hairline between fields, no box
   around every cell. Bordered tables stay for data grids. */
.table.mf-fields > tbody > tr > td { border-top: 0; border-bottom: 1px solid var(--sm-border); padding: 0.667rem 0.533rem; }
.table.mf-fields > tbody > tr:last-child > td { border-bottom: 0; }
.card-body.table-responsive { display: block; }
/* Bootstrap's small is 80% of its parent: inside 13px table text that is 10.4px.
   Keep the proportion, never below 12px. */
small, .small { font-size: max(80%, 0.8rem); }

/* Wide-screen step above Bootstrap's xl. Panels sit side by side only once the
   content area beside the 250px sidebar has room for their tables. */
@media (min-width: 1600px) {
    .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ---- Hub pages (settings landing, parameters, reports) ----------------- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
.hub-card {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; background: var(--sm-surface);
    border: 1px solid var(--sm-border); border-radius: var(--sm-radius); color: var(--sm-text); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hub-card:hover { text-decoration: none; color: var(--sm-text); border-color: #c7d2e5; box-shadow: var(--sm-shadow-md); }
.hub-card .hub-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--sm-primary-soft); color: var(--sm-primary-600); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; font-size: 1rem; }
.hub-card .hub-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hub-card .hub-title { font-weight: 600; font-size: 0.933rem; }
.hub-card .hub-desc { font-size: 0.8rem; color: var(--sm-muted); }
.hub-card .hub-chev { color: var(--sm-faint); font-size: 0.8rem; }
.settings-page .nav-pills { margin-bottom: 1rem !important; gap: 0.25rem; }
.settings-page .nav-pills .nav-link { border-radius: 8px; color: var(--sm-text-2); padding: 0.4rem 0.8rem; font-size: 0.867rem; }
.settings-page .nav-pills .nav-link.active { background: var(--sm-primary-soft); color: var(--sm-primary-600); font-weight: 600; }
.settings-page .nav-pills .nav-link:hover:not(.active) { background: var(--sm-bg); }
.card .empty-state { padding: 2.5rem 1rem; }
.text-faint { color: var(--sm-faint); }

/* ---- Form management: study tabs -------------------------------------- */
.forms-manager .forms-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.forms-manager .forms-toolbar .select2-container, .forms-manager .forms-toolbar #studyPicker { flex: 1 1 22rem; min-width: 0; }
.forms-manager .forms-toolbar .forms-filter { flex: 0 1 18rem; }
.forms-section .forms-main { width: 60%; }
.forms-section .forms-actions .dropdown-menu { min-width: 15rem; }
.forms-section .dropdown-item { font-size: 0.867rem; }
.forms-manager .forms-controls { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.forms-manager .forms-study-picker { min-width: 260px; }
.forms-manager .forms-study-picker .select2-container--bootstrap4 .select2-selection--single { height: calc(1.5em + 0.5rem + 2px); font-size: 0.867rem; }
.forms-manager .forms-study-picker .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 0.5rem); }
.forms-manager .forms-drafts-toggle { font-size: 0.867rem; }
.forms-manager .forms-filter { width: 220px; }
.forms-manager .forms-empty { padding: 2.5rem 1rem; }
@media (max-width: 767.98px) {
    .forms-manager .forms-toolbar .nav-tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
    .forms-manager .forms-controls { width: 100%; }
    .forms-manager .forms-filter, .forms-manager .forms-study-picker { width: 100%; }
}

/* ---- Form layout editor ----------------------------------------------- */
.layout-editor .layout-row { margin-bottom: 1rem; }
.layout-editor .layout-row-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-muted); margin-bottom: 0.4rem; }
.layout-editor .layout-cells { display: flex; gap: 0.75rem; align-items: stretch; }
.layout-editor .layout-cell { flex: 1 1 0; min-width: 0; background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); display: flex; flex-direction: column; }
.layout-editor .layout-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--sm-border); }
.layout-editor .layout-cell-title { font-weight: 600; font-size: 0.867rem; color: var(--sm-text-2); }
.layout-editor .layout-cell-tools { display: flex; align-items: center; gap: 0.3rem; }
.layout-editor .layout-cell-count { font-size: 0.8rem; color: var(--sm-muted); margin-right: 0.25rem; }
.layout-editor .btn-xs { padding: 0.15rem 0.45rem; font-size: 0.8rem; line-height: 1.4; border-radius: 6px; }
.layout-editor .cell-container { display: flex; gap: 0.5rem; padding: 0.5rem; flex: 1 1 auto; }
.layout-editor .sub-cell { flex: 1 1 0; min-width: 0; display: flex; }
.layout-editor .layout-list { list-style: none; margin: 0; padding: 0.35rem; flex: 1 1 auto; min-height: 5.5rem; border: 1px dashed var(--sm-border-strong); border-radius: var(--sm-radius-sm); background: var(--sm-bg); position: relative; }
.layout-editor .sub-cell .layout-list:not(:has(> .sortable-item))::before { content: attr(data-empty-text); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--sm-faint); pointer-events: none; }
.layout-editor .layout-item { margin: 0.3rem 0; }
.layout-editor .layout-item-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); cursor: grab; }
.layout-editor .layout-item-head:active { cursor: grabbing; }
.layout-editor .layout-item-head .grip { color: var(--sm-faint); font-size: 0.8rem; }
.layout-editor .layout-item-head .label { font-weight: 500; font-size: 0.933rem; color: var(--sm-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-editor .layout-item-head .type { margin-left: auto; font-size: 0.8rem; color: var(--sm-muted); background: var(--sm-bg); border-radius: 999px; padding: 0.1rem 0.5rem; flex: 0 0 auto; }
.layout-editor .layout-group > .layout-item-head { background: var(--sm-primary-soft); border-color: #c7d7fb; }
.layout-editor .layout-group > .layout-item-head .label { font-weight: 600; color: var(--sm-primary-600); }
.layout-editor .layout-group-field .layout-item-head { cursor: default; padding: 0.3rem 0.6rem; font-size: 0.867rem; }
.layout-editor .layout-group-list { min-height: 2.5rem; margin-top: 0.25rem; padding: 0.3rem; border-color: #c7d7fb; background: #f4f7fe; }
.layout-editor .layout-placeholder { height: 2.4rem; margin: 0.3rem 0; border: 2px dashed var(--sm-primary); border-radius: var(--sm-radius-sm); background: var(--sm-primary-soft); }
.layout-editor .ui-sortable-helper { box-shadow: var(--sm-shadow-md); opacity: 0.95; }
.layout-editor .layout-tray { border-color: #f6d7a8; margin-bottom: 1rem; }
.layout-editor .layout-tray-head { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.5rem; }
.layout-editor .layout-tray-head > i { margin-top: 0.2rem; }
.layout-editor .layout-tray-list { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 3rem; border-style: dashed; }
.layout-editor .layout-tray-list > .layout-item { margin: 0; flex: 0 1 auto; max-width: 100%; }
#saveLayoutBtn.is-dirty { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
@media (max-width: 991.98px) {
    .layout-editor .layout-cells { flex-direction: column; }
    .layout-editor .cell-container { flex-direction: column; }
}

/* ---- Predefined values: sortable list ---------------------------------- */
.pv-list { list-style: none; margin: 0; padding: 0.5rem 1rem; }
.pv-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.25rem; border-bottom: 1px solid var(--sm-border); background: #fff; }
.pv-row:last-child { border-bottom: 0; }
.pv-row.pv-new { background: var(--sm-primary-soft); border-radius: 6px; }
.pv-row .pv-handle { color: var(--sm-faint); cursor: grab; padding: 0 0.25rem; }
.pv-row .pv-handle:hover { color: var(--sm-text-2); }
.pv-row.ui-sortable-helper { box-shadow: var(--sm-shadow-md); border: 1px solid var(--sm-border-strong); border-radius: 6px; cursor: grabbing; }
.pv-placeholder { height: 40px; border: 1px dashed var(--sm-primary); border-radius: 6px; background: var(--sm-primary-soft); margin: 0.25rem 0; }
.pv-row .pv-order { width: 1.6rem; text-align: right; font-size: 0.8rem; color: var(--sm-muted); font-variant-numeric: tabular-nums; }
.pv-row .pv-label { flex: 1; }
.pv-add { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--sm-border); }

/* ---- Subjects table ---------------------------------------------------- */
.subject-pill { display: inline-block; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.867rem; padding: 0.25rem 0.6rem; border-radius: 999px; color: #fff !important; text-decoration: none; letter-spacing: 0.01em; }
.subject-pill:hover { filter: brightness(0.92); text-decoration: none; }
.subject-pill.badge-warning { background: #d97706; }
.subject-pill.badge-primary { background: var(--sm-primary); }
.subject-pill.badge-success { background: var(--sm-success); }
.subject-pill.badge-danger  { background: var(--sm-danger); }
.subject-pill.badge-purple  { background: var(--sm-purple); }
.subjects-table td { vertical-align: middle; }
.subjects-table thead tr.filters th { padding-top: 0.25rem; padding-bottom: 0.5rem; background: #fff; }

/* ---- Roles ------------------------------------------------------------- */
.role-legend { background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: var(--sm-radius); padding: 0.6rem 0.9rem; }
.role-legend summary { cursor: pointer; font-size: 0.867rem; color: var(--sm-text-2); font-weight: 500; list-style: none; }
.role-legend summary::-webkit-details-marker { display: none; }
.role-legend[open] summary { margin-bottom: 0.6rem; }
.role-legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem 1.25rem; font-size: 0.867rem; }
.role-legend-grid strong { display: block; color: var(--sm-text); }
.role-legend-grid span { color: var(--sm-muted); }
.scope-hint { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Data entry on phones and tablets (subject forms page)
   -------------------------------------------------------------------------- */
.mf-mobile-bar { display: none; }
.btn-icon-lg { width: 46px; height: 46px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1rem; }
body.mf-readonly .addRecordsForm .form-control:disabled,
body.mf-readonly .addRecordsForm .custom-select:disabled { background: #fff; color: var(--sm-text); opacity: 1; border-style: dashed; }

@media (max-width: 991.98px) {
    /* iOS zooms into inputs below 16px; keep every control at 16px and tall enough to tap */
    .addRecordsForm .form-control, .addRecordsForm .custom-select, .addRecordsForm select.form-control,
    .modal .form-control, .modal .custom-select { font-size: 16px; min-height: 44px; }
    .addRecordsForm textarea.form-control { min-height: 88px; }
    .addRecordsForm .form-check-input { width: 22px; height: 22px; margin-top: 0; }
    /* Radio / checkbox choices become tappable chips */
    .addRecordsForm .radio-group { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; }
    .addRecordsForm .radio-group .form-check { position: relative; margin: 0; padding: 0; }
    .addRecordsForm .radio-group .form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .addRecordsForm .radio-group .form-check-label {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.9rem; border: 1px solid var(--sm-border-strong);
        border-radius: 999px; background: #fff; font-size: 15px; cursor: pointer; user-select: none;
    }
    .addRecordsForm .radio-group .form-check-input:checked + .form-check-label { background: var(--sm-primary); border-color: var(--sm-primary); color: #fff; font-weight: 600; }
    .addRecordsForm .radio-group .form-check-input:focus-visible + .form-check-label { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
    .addRecordsForm .radio-group .form-check-input:disabled + .form-check-label { opacity: .6; cursor: default; }
    /* Label above input, inputs full width */
    .addRecordsForm .layout-side-by-side .form-row-container { grid-template-columns: minmax(0, 1fr); row-gap: 0.35rem; }
    .addRecordsForm .form-row-container label { margin: 0; font-size: 0.933rem; color: var(--sm-text-2); }
    .addRecordsForm .form-row-container .input-wrapper { width: 100%; margin: 0; flex-wrap: wrap; gap: 0.35rem; }
    .addRecordsForm .input-wrapper > .form-control, .addRecordsForm .input-wrapper > select { flex: 1 1 100%; width: 100% !important; max-width: 100%; }
    .addRecordsForm .w-ch-8, .addRecordsForm .w-ch-10, .addRecordsForm .w-ch-12, .addRecordsForm .w-ch-16, .addRecordsForm .w-ch-20,
    .addRecordsForm .w-ch-24, .addRecordsForm .w-ch-30, .addRecordsForm .w-ch-40, .addRecordsForm .w-ch-50, .addRecordsForm .w-ch-60 { width: 100% !important; }
    /* Nested layout tables become plain stacked rows */
    .addRecordsForm .table, .addRecordsForm .table td { border: 0 !important; }
    .addRecordsForm .table td { padding: 0.55rem 0.15rem; display: block; }
    .addRecordsForm .table tr { display: block; border-bottom: 1px solid var(--sm-border); }
    .addRecordsForm .table tr:last-child { border-bottom: 0; }
    .addRecordsForm .table tr:focus-within > td { box-shadow: none; }
    .addRecordsForm .form-group-flex-gap { flex-direction: column; gap: 0; }
    .addRecordsForm .fieldgroup-title { font-size: 1rem; }
    #formTabContent .card { border-left: 0; border-right: 0; border-radius: 0; margin-left: -1rem; margin-right: -1rem; }
    #formTabContent .card-header { flex-wrap: wrap; gap: 0.35rem; position: sticky; top: 56px; z-index: 5; background: #fff; }
    #formTabContent .card-header h5 { font-size: 1rem; }
    #formTabContent .card-body { padding: 0.5rem 0.9rem 5rem; }
    .visit-info-input { min-width: 0; width: 110px; }
    .tabs-scroll-wrapper { top: 56px; }
    /* Sticky bottom action bar */
    .mf-mobile-bar {
        display: flex; gap: 0.5rem; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        padding: 0.55rem calc(0.75rem + env(safe-area-inset-right)) calc(0.55rem + env(safe-area-inset-bottom)) calc(0.75rem + env(safe-area-inset-left));
        background: rgba(255,255,255,.96); border-top: 1px solid var(--sm-border); backdrop-filter: blur(8px);
    }
    .mf-mobile-bar .btn { min-height: 46px; font-size: 1rem; border-radius: 10px; }
    .mf-mobile-bar .btn.disabled { opacity: .35; pointer-events: none; }
    .content-wrapper { padding-bottom: 4.5rem; }
    /* Top toolbar: subject switcher fills its row, the save cluster moves to the fixed bottom bar */
    .mf-toolbar .mf-nav { flex: 1 1 100%; }
    .mf-toolbar .mf-nav .subject-id-input { flex: 1 1 auto; min-width: 0; }
    .mf-toolbar .mf-save { flex: 1 1 100%; margin-left: 0; }
    .mf-toolbar .mf-save .change-reason { flex: 1 1 auto; width: auto; }
    #toggleFullscreenBtn { display: none; }
    /* Tab bar: scroll arrows sit beside the tab strip instead of over it */
    .tabs-scroll-wrapper { display: flex; align-items: center; }
    .tabs-scroll-wrapper .scroll-btn.scroll-btn { position: static; transform: none; flex: 0 0 32px; margin: 0 4px; box-shadow: none; }
    .tabs-scroll-wrapper .scrollable-tabs.scrollable-tabs { padding: 0 4px; min-width: 0; flex: 1 1 auto; }
    .main-footer { display: none; }
}
@media (max-width: 575.98px) {
    .page-header h1 { font-size: 1.067rem; }
    .title-picker-btn { font-size: 1.067rem; }
    .content-header { padding: 0.75rem 1rem 0.5rem; }
    .page-header .page-actions { width: 100%; }
    .page-header .page-actions .btn { flex: 1 1 auto; }
    .page-subtitle { display: none; }
}
@media (max-width: 991.98px) {
    /* the sticky bottom bar carries Save on small screens */
    #saveRecordsBtn { display: none; }
}

/* Subjects list: center pills + grouping */
.subjects-toolbar { display: flex; flex-direction: column; gap: 0.6rem; }
.subjects-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.subjects-toolbar-row .custom-switch { white-space: nowrap; }
.subjects-status { width: auto; min-width: 9rem; }
.subjects-legend { margin-left: auto; font-size: 0.8rem; }
.center-filter[hidden] { display: none; }
.center-filter { border: 1px solid var(--sm-border); border-radius: 0.6rem; background: var(--sm-bg); padding: 0.55rem 0.65rem 0.65rem; }
.center-filter-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.45rem; font-size: 0.8rem; }
.center-filter-title { font-weight: 600; color: var(--sm-text); }
.center-filter-note { color: var(--sm-muted); }
.center-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.center-pill-check { display: none; font-size: 0.65rem; }
.center-pill.active .center-pill-check { display: inline; }
.center-pill {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 999px;
    border: 1px solid var(--sm-border-strong); background: #fff; color: var(--sm-text-2); font-size: 0.8rem; line-height: 1.3; cursor: pointer;
}
.center-pill:hover { border-color: var(--sm-primary); color: var(--sm-primary); }
.center-pill.active { background: var(--sm-primary); border-color: var(--sm-primary); color: #fff; }
.center-pill-count { font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 0.4rem; border-radius: 999px; background: rgba(15, 23, 42, .06); }
.center-pill.active .center-pill-count { background: rgba(255,255,255,.22); }
.center-pill:focus-visible { outline: 2px solid var(--sm-primary); outline-offset: 2px; }
tr.dtrg-center > td {
    background: var(--sm-surface-2, #f8fafc) !important; font-weight: 600; color: var(--sm-text); border-top: 2px solid var(--sm-border-strong) !important;
    padding: 0.5rem 0.75rem !important;
}
.subjects-table.is-grouped tbody tr:not(.dtrg-center) > td:first-child { padding-left: 1.5rem; }
@media (max-width: 575.98px) {
    .subjects-toolbar .sm-legend { display: none; }
    .center-pills { max-height: 9.5rem; overflow-y: auto; }
}

/* --------------------------------------------------------------------------
   Study / centre analytics pages
   -------------------------------------------------------------------------- */
.analytics-card { height: calc(100% - 1rem); }
.analytics-card .card-header { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.card-hint { font-size: 0.8rem; color: var(--sm-muted); }
.chart-box { position: relative; height: 320px; }
.chart-box-bars { height: 220px; }
.chart-box-sm { height: 240px; }
.chart-box-xs { height: 150px; }
.analytics-table td, .analytics-table th { vertical-align: middle; }
.analytics-table thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sm-muted); border-top: 0; }
.share-bar { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background: var(--sm-bg); vertical-align: middle; margin-right: 0.4rem; overflow: hidden; }
.share-bar span { display: block; height: 100%; background: var(--sm-primary-600); border-radius: 999px; }
.badge-status-lg { font-size: 0.867rem; padding: 0.35rem 0.7rem; }
@media (max-width: 767.98px) { .chart-box { height: 260px; } }

/* --------------------------------------------------------------------------
   Studies directory: toolbar, momentum row, period bar
   -------------------------------------------------------------------------- */
.studies-toolbar-card { margin-bottom: 1rem; }
.studies-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding: 0.7rem 1rem; }
.status-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.status-chips .chip { border: 1px solid var(--sm-border); background: var(--sm-surface); color: var(--sm-text-2); border-radius: 999px; padding: 0.28rem 0.75rem; font-size: 0.8rem; font-weight: 500; line-height: 1.3; cursor: pointer; white-space: nowrap; }
.status-chips .chip:hover { border-color: var(--sm-border-strong); color: var(--sm-text); }
.status-chips .chip:focus { outline: none; box-shadow: 0 0 0 2px var(--sm-primary-soft); }
.status-chips .chip.active { background: var(--sm-primary-soft); border-color: #bfd0fb; color: var(--sm-primary-600); }
.status-chips .chip-count { margin-left: 0.4rem; font-size: 0.8rem; color: var(--sm-muted); font-variant-numeric: tabular-nums; }
.status-chips .chip.active .chip-count { color: inherit; }
.studies-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.studies-tools .search-box { position: relative; }
.studies-tools .search-box i { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--sm-faint); font-size: 0.78rem; pointer-events: none; }
.studies-tools .search-box input { padding-left: 1.9rem; width: 250px; }
.studies-tools select { width: auto; }
.studies-count { font-size: 0.8rem; color: var(--sm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
    .studies-tools { width: 100%; }
    .studies-tools .search-box { flex: 1 1 auto; }
    .studies-tools .search-box input { width: 100%; }
    .status-chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.15rem; }
    .studies-tools select { flex: 1 1 auto; }
}
/* Study overview: team card */
.study-team .team-list { display: flex; flex-direction: column; gap: 0.55rem; }
.study-team .team-member { display: flex; align-items: flex-start; gap: 0.6rem; }
.study-team .team-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.study-team .team-body { min-width: 0; }
.avatar-initials.team-avatar { font-size: 0.9rem; }
table .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.study-team .team-name { font-weight: 600; font-size: 0.933rem; color: var(--sm-text); }
.study-team .team-profile { color: inherit; }
.study-team .team-profile:hover, .study-team .team-profile:focus { color: var(--sm-primary); text-decoration: underline; }
.study-team .team-avatar-link { display: inline-flex; }
.study-team .team-centers { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.study-team .team-mail { display: block; font-size: 0.8rem; color: var(--sm-muted); word-break: break-all; }
.study-team .team-mail:hover { color: var(--sm-primary); }
.study-team .team-body { flex: 1 1 auto; }
.study-team .team-message { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--sm-muted); border: 1px solid var(--sm-border); }
.study-team .team-message:hover, .study-team .team-message:focus-visible { color: var(--sm-primary); border-color: var(--sm-primary); background: var(--sm-primary-soft); }

/* --------------------------------------------------------------------------
   Subject lifecycle (status + consent) panel, consent page, overview card
   -------------------------------------------------------------------------- */
.subject-lifecycle { margin-bottom: 1rem; }
.subject-lifecycle .card-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; padding: 0.75rem; }
.lc-block { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; min-width: 0; padding: 0.55rem 0.75rem; border: 1px solid var(--sm-border); border-radius: 0.5rem; background: var(--sm-bg, #f8fafc); }
.lc-block .lc-label { flex: 0 0 100%; order: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sm-faint); margin: 0 0 0.1rem; }
.lc-block .badge { order: 1; white-space: normal; text-align: left; line-height: 1.25; max-width: 100%; }
.lc-block .lc-meta { flex: 0 0 100%; order: 3; font-size: 0.8rem; color: var(--sm-muted); line-height: 1.3; }
.lc-block .lc-meta:empty { display: none; }
.lc-block .btn { order: 2; margin-left: auto; }
.lc-actions { grid-column: 1 / -1; display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; margin-top: -0.2rem; }
.subject-lifecycle .lc-history { grid-column: 1 / -1; border-top: 1px solid var(--sm-border); padding-top: 0.6rem; font-size: 0.867rem; }
.subject-lifecycle .lc-history table td, .subject-lifecycle .lc-history table th { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
.subject-lifecycle .lc-history h6 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sm-muted); margin: 0.4rem 0 0.3rem; }
.badge-soft-danger { background: var(--sm-danger-soft); color: var(--sm-danger); }
.badge-soft-purple { background: var(--sm-purple-soft); color: var(--sm-purple); }
.badge-purple { background: var(--sm-purple); color: #fff; }
.consent-flag { font-size: 0.867rem; vertical-align: middle; }
.consent-strip { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--sm-bg); }
.consent-strip span { display: block; height: 100%; }
.consent-kpi { display: flex; flex-direction: column; }
.consent-kpi .v { font-size: 1.35rem; font-weight: 650; line-height: 1.1; }
.consent-kpi .l { font-size: 0.8rem; color: var(--sm-muted); }
.consent-versions td, .consent-versions th { vertical-align: middle; }
.consent-subjects td { vertical-align: middle; }
@media (max-width: 767.98px) { .lc-actions { margin-left: 0; width: 100%; } }

/* --------------------------------------------------------------------------
   Study overview rewrite, criteria, endpoints
   -------------------------------------------------------------------------- */
.study-nav .study-nav-pos { font-variant-numeric: tabular-nums; opacity: 1; color: var(--sm-muted); }
.protocol-title { font-size: 1.067rem; font-weight: 600; line-height: 1.4; color: var(--sm-text); margin-bottom: 0.6rem; }
.protocol-desc { color: var(--sm-text-2); font-size: 0.933rem; }
.fact-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; font-size: 0.867rem; }
.fact-grid dt { font-weight: 500; color: var(--sm-muted); }
.fact-grid dd { margin: 0; color: var(--sm-text); }
.analytics-card .card-header .ml-auto { margin-left: auto; }
.crit-heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sm-muted); margin-bottom: 0.5rem; }
.crit-list { list-style: none; padding: 0; margin: 0; font-size: 0.867rem; }
.crit-list li { display: flex; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--sm-border); line-height: 1.4; }
.crit-list li:last-child { border-bottom: 0; }
.crit-code { flex: 0 0 auto; font-weight: 650; font-size: 0.8rem; color: var(--sm-primary-600); background: var(--sm-primary-soft); border-radius: 6px; padding: 0.1rem 0.4rem; line-height: 1.5; height: fit-content; }
.crit-manage .list-group-item { display: flex; gap: 0.75rem; align-items: flex-start; }
.crit-manage .crit-edit-form { flex: 1 1 auto; display: flex; gap: 0.5rem; align-items: flex-start; }
.crit-manage .crit-edit-form textarea { flex: 1 1 auto; }
.crit-manage .crit-actions { display: flex; flex-direction: column; gap: 0.25rem; }
.crit-manage .crit-text { font-size: 0.933rem; }
.crit-add-form { display: flex; gap: 0.5rem; align-items: flex-start; }
.crit-add-form textarea { flex: 1 1 auto; }
.endpoint-list { list-style: none; margin: 0; padding: 0; }
.endpoint-row { padding: 0.7rem 1.15rem; border-bottom: 1px solid var(--sm-border); }
.endpoint-row:last-child { border-bottom: 0; }
.endpoint-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.endpoint-name { font-weight: 600; font-size: 0.933rem; }
.endpoint-value { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.endpoint-bar { height: 5px; border-radius: 999px; background: var(--sm-bg); border: 1px solid var(--sm-border); overflow: hidden; margin-top: 0.4rem; }
.endpoint-bar span { display: block; height: 100%; background: var(--sm-success); border-radius: 999px; }
.endpoint-bar.is-off span { background: var(--sm-warning); }
.endpoint-summary { font-size: 0.8rem; color: var(--sm-muted); margin-top: 0.3rem; }
.endpoint-table td { vertical-align: top; }
.endpoint-table .endpoint-value { margin-left: 0; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 1.15rem; border-bottom: 1px solid var(--sm-border); font-size: 0.867rem; }
.activity-list li:last-child { border-bottom: 0; }
.activity-list .activity-text { flex: 1 1 auto; min-width: 0; }
.activity-list .activity-time { color: var(--sm-faint); font-size: 0.8rem; white-space: nowrap; }
.kpi .study-card-timeline .timeline-text { margin-top: 0.2rem; }
.status-chips .chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; }

/* ---- Centre languages / eCRF language ---------------------------------- */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; }
.lang-option { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .3rem .5rem; border: 1px solid var(--sm-border, #e3e8ef); border-radius: .5rem; cursor: pointer; font-size: 0.867rem; background: var(--sm-surface, #fff); }
.lang-option.is-on { border-color: var(--sm-primary, #2563eb); background: rgba(37, 99, 235, .06); }
.lang-option input[type=checkbox] { margin: 0; }
.lang-option .lang-code { font-weight: 700; font-size: 0.8rem; letter-spacing: .04em; color: var(--sm-muted, #6b7280); min-width: 1.6rem; }
.lang-option .lang-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-option input[type=radio] { margin: 0; }
.lang-option input[type=radio]:disabled { opacity: .25; }
.form-lang-switch .btn { min-width: 2.6rem; font-weight: 600; letter-spacing: .04em; }
.trans-table td { vertical-align: top; }
.trans-source { font-size: 0.933rem; }
.trans-source-extra { font-size: .8rem; color: var(--sm-muted, #6b7280); margin-top: .15rem; }
.trans-row.is-missing td:first-child { box-shadow: inset 3px 0 0 var(--sm-warning, #f59e0b); }
.trans-row.has-translation td:first-child { box-shadow: inset 3px 0 0 var(--sm-success, #10b981); }
.trans-group-row td { background: var(--sm-surface-2, #f6f8fb); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

/* Users list: grouped sections and profile page */
.user-group-head { padding: 0.9rem 0.25rem 0.5rem; border-top: 1px solid var(--sm-border); }
.user-group-head:first-of-type { border-top: 0; padding-top: 0.25rem; }
.user-group-head + .table-responsive { margin-bottom: 0.5rem; }
.user-centers { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px; }
.user-link { color: inherit; }
.user-link:hover { color: var(--sm-primary-600); text-decoration: none; }
.profile-hero { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.profile-hero .avatar, .profile-hero .avatar-initials { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; font-size: 2rem; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--sm-surface), 0 0 0 4px var(--sm-border); }
.profile-hero .profile-name { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; color: var(--sm-text); margin: 0; }
.profile-hero .profile-meta { color: var(--sm-muted); font-size: 0.933rem; }
.profile-hero .profile-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; }
.profile-facts { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-left: auto; }
.profile-facts-wide { margin-left: 0; gap: 2rem; }
/* The picture is the upload control: the camera badge appears on hover and on keyboard focus. */
.avatar-edit { position: relative; display: inline-flex; margin: 0; cursor: pointer; border-radius: 50%; }
.avatar-edit-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(15, 23, 42, 0.55); color: #fff; font-size: 1.25rem; opacity: 0; transition: opacity 0.15s ease; }
.avatar-edit:hover .avatar-edit-overlay, .avatar-edit:focus-within .avatar-edit-overlay { opacity: 1; }
.avatar-edit:focus-within { box-shadow: 0 0 0 3px var(--sm-primary); }
@media (hover: none) { .avatar-edit-overlay { opacity: 1; background: rgba(15, 23, 42, 0.35); } }
.profile-facts .fact { min-width: 84px; }
.profile-facts .fact-value { font-weight: 650; font-size: 1.067rem; color: var(--sm-text); line-height: 1.1; }
.profile-facts .fact-label { font-size: 0.8rem; color: var(--sm-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.profile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.profile-list li { display: flex; align-items: baseline; gap: 0.5rem; justify-content: space-between; }
.profile-list a { color: var(--sm-text); font-weight: 600; }
.profile-list a:hover { color: var(--sm-primary-600); text-decoration: none; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { display: grid; grid-template-columns: 92px 1fr; gap: 0.6rem; padding: 0.4rem 0; border-top: 1px solid var(--sm-border); font-size: 0.867rem; }
.activity-list li:first-child { border-top: 0; }
.activity-list time { color: var(--sm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) { .profile-facts { margin-left: 0; width: 100%; } }

/* Details reads as a card and becomes a form when Edit is pressed. */
.card-header > .card-action { margin-left: auto; font-size: 0.867rem; font-weight: 600; color: var(--sm-primary-600); white-space: nowrap; }
.card-header > .card-action:hover { text-decoration: none; color: var(--sm-primary-700, var(--sm-primary-600)); }
.detail-list { margin: 0; }
.detail-row { display: grid; grid-template-columns: 190px 1fr; gap: 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--sm-border); }
.detail-row:first-child { border-top: 0; padding-top: 0; }
.detail-row dt { font-size: 0.8rem; font-weight: 600; color: var(--sm-muted); margin: 0; }
.detail-row dd { margin: 0; color: var(--sm-text); overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .detail-row { grid-template-columns: 1fr; gap: 0.15rem; } }

/* ---- Data queries ---- */
.nav-sidebar .nav-link .nav-count.nav-count-alert { background: rgba(239, 68, 68, 0.28); color: #fff; }
.dq-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.55rem 1rem; margin: -0.75rem 0 1rem; background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 12px; }
.dq-strip .lc-label { font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sm-muted); }
.dq-strip .lc-meta { font-size: 0.867rem; color: var(--sm-muted); }
.dq-mark { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.8rem; font-weight: 650; text-decoration: none !important; vertical-align: middle; line-height: 1.4; }
.dq-mark.dq-open { background: var(--sm-danger-soft); color: var(--sm-danger); }
.dq-mark.dq-answered { background: var(--sm-warning-soft); color: var(--sm-warning); }
.dq-mark.dq-high { box-shadow: 0 0 0 1px var(--sm-danger); }
.dq-row-open .form-row-container { box-shadow: inset 3px 0 0 var(--sm-danger); padding-left: 0.5rem; border-radius: 4px; }
.dq-row-answered .form-row-container { box-shadow: inset 3px 0 0 var(--sm-warning); padding-left: 0.5rem; border-radius: 4px; }
.dq-raise, .dq-raise:hover { text-decoration: none; }
.dq-raise { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 0.35rem; padding: 0; border: 1px solid var(--sm-border); border-radius: 50%; background: var(--sm-surface); color: var(--sm-muted); font-size: 0.8rem; line-height: 1; opacity: 0; transition: opacity 0.12s, color 0.12s; vertical-align: middle; cursor: pointer; }
.form-row-container:hover .dq-raise, .dq-raise:focus { opacity: 1; }
.dq-raise:hover, .dq-raise:focus { color: var(--sm-primary); border-color: var(--sm-primary); outline: none; }
@media (hover: none) { .dq-raise { opacity: 0.6; } }
.dq-tab-count { font-size: 0.8rem; vertical-align: middle; }
.dq-list-badge { font-size: 0.8rem; vertical-align: middle; text-decoration: none !important; }
.dq-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.dq-filters .nav-pills .nav-link { padding: 0.25rem 0.7rem; font-size: 0.867rem; border-radius: 999px; }
.dq-filters .nav-pills .nav-link:not(.active) { color: var(--sm-text-2); }
.dq-filter-form { gap: 0.25rem; }
.dq-table td { vertical-align: top; font-size: 0.867rem; }
.dq-table .dq-question { min-width: 300px; max-width: 460px; }
.dq-table tr.dq-high td:first-child { box-shadow: inset 3px 0 0 var(--sm-danger); }
.dq-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; margin: 0; font-size: 0.867rem; }
.dq-facts dt { font-weight: 500; color: var(--sm-muted); }
.dq-facts dd { margin: 0; }
.dq-thread { display: flex; flex-direction: column; gap: 0.75rem; }
.dq-msg { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.9rem; border: 1px solid var(--sm-border); border-radius: 10px; background: var(--sm-surface); }
.dq-msg-main { flex: 1 1 auto; min-width: 0; }
.dq-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.avatar-initials.dq-avatar { font-size: 0.85rem; }
.dq-avatar.dq-avatar-sm { width: 22px; height: 22px; }
.avatar-initials.dq-avatar-sm { font-size: 0.6rem; }
.dq-raiser { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
.dq-msg-question { border-left: 3px solid var(--sm-danger); }
.dq-msg-answer { border-left: 3px solid var(--sm-warning); }
.dq-msg-close { border-left: 3px solid var(--sm-success); }
.dq-msg-reopen { border-left: 3px solid var(--sm-danger); }
.dq-msg-cancel, .dq-msg-comment { border-left: 3px solid var(--sm-border-strong); }
.dq-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; font-size: 0.867rem; }
.dq-msg-body { font-size: 0.933rem; white-space: normal; }
.dq-reply-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.dq-target { padding: 0.6rem 0.8rem; background: var(--sm-bg); border-radius: 8px; font-size: 0.933rem; }
.mf-readonly .dq-raise, .mf-readonly .dq-raise-form { display: inline-flex !important; }

/* Enrolment target */
.kpi-sub { font-size: 0.8rem; font-weight: 500; color: var(--sm-muted); }
.kpi-bar { display: block; height: 4px; border-radius: 999px; background: var(--sm-bg); border: 1px solid var(--sm-border); overflow: hidden; margin-top: 6px; max-width: 220px; }
.kpi-bar span { display: block; height: 100%; background: var(--sm-primary); border-radius: 999px; }
.design-card .design-result { background: var(--sm-bg); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); padding: 0.75rem 0.9rem; }
.design-card .design-result .n { font-size: 1.6rem; font-weight: 650; color: var(--sm-text); line-height: 1.1; }
.design-card .design-result ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.867rem; color: var(--sm-text-2); }

/* ---- Eligibility checklist ---- */
.elig-list { display: flex; flex-direction: column; gap: 0.35rem; }
.elig-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "code text answer" "code note note"; gap: 0.3rem 0.75rem; align-items: center; padding: 0.5rem 0.75rem; border: 1px solid var(--sm-border); border-radius: 10px; background: var(--sm-surface); }
.elig-row.is-failed { border-color: #f3b4b4; background: var(--sm-danger-soft); }
.elig-row .crit-code { grid-area: code; }
.elig-row .elig-text { grid-area: text; font-size: 0.933rem; }
.elig-row .elig-meta { display: block; font-size: 0.8rem; color: var(--sm-muted); }
.elig-row .elig-answer { grid-area: answer; }
.elig-row .elig-answer .btn { padding: 0.15rem 0.55rem; font-size: 0.8rem; }
.elig-row .elig-answer input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; }
.elig-row .elig-note { grid-area: note; font-size: 0.8rem; }
@media (max-width: 575.98px) { .elig-row { grid-template-columns: auto 1fr; grid-template-areas: "code text" "code answer" "code note"; } }
.elig-live .badge { font-size: 0.8rem; }
/* the global .btn-outline-* rules above carry !important, so the chosen answer must too */
.elig-row .elig-answer .btn.active.btn-outline-success { background: var(--sm-success) !important; border-color: var(--sm-success) !important; color: #fff !important; }
.elig-row .elig-answer .btn.active.btn-outline-danger { background: var(--sm-danger) !important; border-color: var(--sm-danger) !important; color: #fff !important; }
.elig-row .elig-answer .btn.active.btn-outline-secondary { background: var(--sm-text-2) !important; border-color: var(--sm-text-2) !important; color: #fff !important; }
.elig-row .elig-answer .btn.active::before { content: "\2713"; margin-right: 0.3rem; font-weight: 700; }
.elig-row .elig-answer .btn:not(.active) { opacity: 0.85; }

/* ---- Form review states ---- */
.fr-wrap { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.6rem; }
.fr-badge, .fr-signed { font-size: 0.8rem; }
.fr-menu .dropdown-menu { min-width: 200px; }
.fr-menu .dropdown-item { font-size: 0.867rem; }
.fr-locked .addRecordsForm { opacity: 0.85; }
.fr-locked-note { margin: 0 0 0.75rem; }
.fr-card-pill { font-size: 0.8rem; }
.fr-meaning { padding: 0.6rem 0.8rem; background: var(--sm-bg); border-left: 3px solid var(--sm-primary); border-radius: 6px; font-style: italic; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; }
.review-pct { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; color: var(--sm-text); }
.review-n { font-size: 0.8rem; color: var(--sm-muted); }
.review-bar { height: 6px; border-radius: 999px; background: var(--sm-bg); border: 1px solid var(--sm-border); overflow: hidden; margin: 0.35rem 0; }
.review-bar span { display: block; height: 100%; border-radius: 999px; }
.review-label { font-size: 0.8rem; color: var(--sm-text-2); }

/* Edit checks */
.ec-table td { vertical-align: top; }
.ec-table .ec-field { width: 38%; }
.ec-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.15rem 0; font-size: 0.867rem; }
.ec-rule.is-off { opacity: 0.5; }
.ec-rule-actions { margin-left: auto; display: inline-flex; gap: 0.6rem; }
.ec-rule-actions a { color: var(--sm-muted); }
.ec-rule-actions a:hover { color: var(--sm-text); }
.ec-has-rules .ec-field { font-weight: 600; }
.ec-flag { display: block; flex-basis: 100%; width: 100%; margin-top: 0.2rem; font-size: 0.8rem; color: var(--sm-danger); }
.ec-flag-warning { color: var(--sm-warning); }
.ec-row { box-shadow: inset 3px 0 0 var(--sm-danger); padding-left: 0.5rem; border-radius: 4px; }
.ec-row-warning { box-shadow: inset 3px 0 0 var(--sm-warning); }
.ec-report .card-header { display: flex; align-items: center; }
.ec-value { font-size: 0.867rem; }
tr.ec-warning td { color: var(--sm-muted); }

/* Registration wizard, screening log */
.reg-wizard .reg-step { margin-bottom: 1rem; }
.reg-wizard .card-header { display: flex; align-items: center; gap: 0.6rem; }
.reg-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sm-primary); color: #fff; font-size: 0.8rem; font-weight: 650; flex: 0 0 auto; }
.reg-id { font-size: 1.35rem; font-weight: 650; letter-spacing: 0.02em; color: var(--sm-text); line-height: 1.2; padding-top: 0.15rem; }
.reg-consent-fields.is-off { opacity: 0.45; }
.reg-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.reg-outcome { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border: 1px solid var(--sm-border); border-radius: 12px; background: var(--sm-surface); cursor: pointer; margin: 0; }
.reg-outcome input { position: absolute; opacity: 0; }
.reg-outcome.active { border-color: var(--sm-primary); box-shadow: 0 0 0 2px var(--sm-primary-soft); }
.reg-outcome-title { font-weight: 600; }
.reg-outcome-hint { font-size: 0.8rem; color: var(--sm-muted); }
.text-purple { color: var(--sm-purple) !important; }
.scr-table td { vertical-align: middle; }
.scr-side { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem; }
.scr-side > .scr-card { flex: 1 1 300px; min-width: 0; }
.scr-side > .scr-card-centre { flex: 2.6 1 460px; }
.scr-side .card { height: 100%; margin-bottom: 0; }
.scr-centre-table th:not(:first-child), .scr-centre-table td:not(:first-child) { width: 1%; white-space: nowrap; }
.scr-centre-table td:first-child { min-width: 14rem; }
.scr-reason { margin-bottom: 0.5rem; }

/* Safety listing */
.saf-bar-col { width: 30%; }
.saf-bar { display: flex; height: 8px; min-width: 56px; border-radius: 4px; overflow: hidden; background: var(--sm-surface); }
.saf-bar span { display: block; height: 100%; }
.saf-terms td { vertical-align: middle; }
.saf-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.saf-filter-links { gap: 0.35rem; }
.saf-table td { vertical-align: middle; }
tr.saf-sae td:first-child { box-shadow: inset 3px 0 0 var(--sm-danger); }

/* Visit schedule */
.vs-bar-col { width: 14%; min-width: 90px; }
.vs-name { max-width: 260px; }
.vs-name .text-truncate { max-width: 240px; }
.vs-table th, .vs-table td { white-space: nowrap; }
.vs-table td.vs-name { white-space: normal; }
.vs-table td, .vs-rows td, .vs-schedule td { vertical-align: middle; }
.vs-form { border-top: 1px solid var(--sm-border); padding-top: 1rem; }
.vs-forms { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }

/* Survival analysis */
.km-chart-wrap { position: relative; height: 380px; }
.km-chart-wrap { height: 420px; }
/* Number-at-risk rows: the label sits in the chart's left margin, the counts under the x-axis ticks (positioned by study_survival.js) */
.km-risk { font-size: 0.8rem; margin-top: 0.25rem; --km-left: 250px; }
.km-risk-row { position: relative; min-height: 1.7rem; display: grid; grid-template-columns: var(--km-left) minmax(0, 1fr); align-items: center; padding: 0.15rem 0; }
.km-risk-head { font-weight: 600; color: var(--sm-muted); border-bottom: 1px solid var(--sm-card-border); margin-bottom: 0.15rem; }
.km-risk-label { padding-right: 0.75rem; font-size: 0.8rem; line-height: 1.2; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.km-risk-head .km-risk-label { font-weight: 600; }
.km-risk-cell { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.km-risk:not(.is-placed) .km-risk-row { display: flex; gap: 2rem; }
.km-risk:not(.is-placed) .km-risk-cell { position: static; transform: none; }
.km-risk-btn { background: none; border: 0; padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--sm-primary); font: inherit; font-weight: 600; cursor: pointer; }
.km-risk-btn:hover { background: var(--sm-primary-soft); text-decoration: underline; }
.km-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
.stat-table td, .stat-table th { vertical-align: middle; }
.stat-table td:not(:first-child), .stat-table th:not(:first-child) { white-space: normal; }
.stat-table td .small, .stat-table td strong { white-space: nowrap; }
.stat-table td:first-child { overflow-wrap: break-word; min-width: 140px; }
.stat-table .ref { color: var(--sm-muted); font-style: italic; }
.km-note { font-size: 0.8rem; color: var(--sm-muted); }

/* Searchable column filters on the subjects list */
tr.filters th { min-width: 200px; }
tr.filters .select2-container--bootstrap4 .select2-selection--single { height: calc(1.5em + 0.5rem + 2px); font-size: 0.867rem; }
tr.filters .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 0.5rem); }
tr.filters th:first-child, tr.filters th:last-child { min-width: 0; }

/* Protocol deviations */
.dev-table td { vertical-align: top; }
.dev-table .dev-desc { min-width: 320px; }

/* Study overview activity feed */
.act-feed { list-style: none; margin: 0; padding: 0; }
.act-feed .act { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.55rem 1.15rem; border-top: 1px solid var(--sm-border); font-size: 0.867rem; line-height: 1.4; }
.act-feed .act:first-child { border-top: 0; }
.act-feed .act-icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-top: 1px; background: var(--sm-primary-soft); color: var(--sm-primary); }
.act-feed .is-add .act-icon { background: var(--sm-success-soft); color: var(--sm-success); }
.act-feed .is-del .act-icon { background: var(--sm-danger-soft); color: var(--sm-danger); }
.act-feed .act-text { flex: 1 1 auto; min-width: 0; color: var(--sm-text-2); }
.act-feed .act-text strong { color: var(--sm-text); font-weight: 600; }
.act-feed .act-ref { font-weight: 600; color: var(--sm-text); }
.act-feed a.act-ref { color: var(--sm-primary); }
.act-feed .act-val { color: var(--sm-muted); }
.act-feed .act-val::before { content: '· '; }
.act-feed .act-time { flex: 0 0 auto; color: var(--sm-faint); font-size: 0.8rem; white-space: nowrap; margin-top: 2px; }

/* Imprint */
.imprint-card .card-body { padding: 1.5rem 1.75rem; }
.imprint-title { font-weight: 700; margin-bottom: 0.25rem; }
.imprint-card h5 { font-size: 0.933rem; font-weight: 650; margin-top: 1.4rem; margin-bottom: 0.5rem; color: var(--sm-text); }
.imprint-address { line-height: 1.5; margin-bottom: 0.75rem; }
.imprint-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
.imprint-facts dt { font-weight: 500; color: var(--sm-muted); }
.imprint-facts dd { margin: 0; }
.imprint-list { padding-left: 1.2rem; margin-bottom: 0; }
.login-legal { font-size: 0.8rem; color: var(--sm-faint, #9aa3b2); margin-top: 0.25rem; }
.login-legal a { color: inherit; text-decoration: underline; }
.km-toggles { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
/* Data audit trail */
.audit-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 0.35rem; padding: 0; border: 1px solid var(--sm-border); border-radius: 50%; background: var(--sm-surface); color: var(--sm-muted); font-size: 0.8rem; line-height: 1; vertical-align: middle; cursor: pointer; }
.audit-btn:hover, .audit-btn:focus { color: var(--sm-primary); border-color: var(--sm-primary); outline: none; }
.audit-diff del { color: var(--sm-danger); text-decoration: line-through; opacity: 0.8; margin-right: 0.35rem; }
.audit-diff ins { color: var(--sm-text); text-decoration: none; font-weight: 600; }
.audit-diff del + ins::before { content: '→ '; color: var(--sm-muted); font-weight: 400; }
.audit-hash { font-size: 0.8rem; color: var(--sm-muted); word-break: break-all; }
.audit-table td { vertical-align: middle; }
.audit-recent li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-top: 1px solid var(--sm-border); font-size: 0.867rem; }
.audit-recent li:first-child { border-top: 0; }
.audit-recent .audit-field { font-weight: 600; }
/* In a 560px panel the row does not fit on one line: who and when wrap under it. */
.audit-recent .audit-when { margin-left: auto; }
.side-panel .audit-recent li { flex-wrap: wrap; }
.side-panel .audit-recent .audit-when { margin-left: 0; width: 100%; }
.audit-timeline { list-style: none; margin: 0; padding: 0; }
.audit-timeline li { display: flex; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--sm-border); }
.audit-timeline li:first-child { border-top: 0; padding-top: 0; }
.audit-timeline .audit-when { flex: 0 0 130px; font-size: 0.8rem; color: var(--sm-muted); }
.audit-filters .form-control { margin-bottom: 0.25rem; }

/* --------------------------------------------------------------------------
   Subject page: toolbar and field rows
   -------------------------------------------------------------------------- */
.mf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.533rem 1.067rem; }
.mf-toolbar .mf-nav, .mf-toolbar .mf-tools, .mf-toolbar .mf-save { display: flex; align-items: center; gap: 0.5rem; }
.mf-toolbar .mf-save { margin-left: auto; }
.mf-toolbar .subject-id-input { min-width: 11rem; border: 1px solid var(--sm-border); background: #fff; font-variant-numeric: tabular-nums; }
.mf-toolbar .subject-id-input strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
.mf-toolbar .change-reason { flex: 1 1 14rem; width: auto; min-width: 10rem; max-width: 22rem; }
/* Below 1500px the toolbar cannot hold all groups on one line: Save and its reason
   take a row of their own, aligned right, rather than wrapping at random. */
@media (max-width: 1499.98px) { .mf-toolbar .mf-save { flex: 1 1 100%; justify-content: flex-end; } }
.mf-toolbar .btn-group .btn-sm { padding-top: 0.42rem; padding-bottom: 0.42rem; }

/* Field rows: label column on the left, the control right beside it, no leaders */
.addRecordsForm .layout-side-by-side .form-row-container { display: grid; grid-template-columns: minmax(200px, 30%) minmax(0, 1fr); column-gap: 1.25rem; align-items: center; overflow: visible; width: 100%; }
.addRecordsForm .layout-side-by-side .form-row-container > label { margin: 0; line-height: 1.35; color: var(--sm-text-2); }
.addRecordsForm .form-row-container .dots { display: none; }
.addRecordsForm .layout-side-by-side .form-row-container .input-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.35rem 0.6rem; min-width: 0; }
.addRecordsForm .layout-under-label .form-row-container { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.addRecordsForm .input-wrapper > select.form-control, .addRecordsForm .input-wrapper > .custom-select, .addRecordsForm .input-wrapper > .select2-container { max-width: 340px; }
.addRecordsForm .input-wrapper > input.form-control:not([class*="w-ch-"]):not([type="date"]):not([type="number"]) { max-width: 440px; }
.addRecordsForm .input-wrapper > input[type="number"].form-control:not([class*="w-ch-"]) { max-width: 140px; }
.addRecordsForm .input-wrapper > input[type="date"].form-control { max-width: 190px; }
.addRecordsForm .input-wrapper > textarea.form-control { max-width: 640px; }
.addRecordsForm .input-wrapper .form-check-inline { margin-right: 0.9rem; }
.addRecordsForm .table td { padding: 0.45rem 0.5rem; vertical-align: middle; }
.addRecordsForm .fieldgroup-title { margin-bottom: 0.35rem; }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.quick-actions.quick-actions-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1.25rem; }
.quick-actions.quick-actions-row a { padding: 0.7rem 0.9rem; box-shadow: var(--sm-shadow); }
.dash-equal > [class*="col-"] { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.dash-equal .card { flex: 1 1 auto; margin-bottom: 0; }
.dash-equal .card-body.scroll-list { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.list-more { padding: 0.4rem 0 0; font-size: 0.867rem; }
.dash-equal .card-body.scroll-list .bar-list li, .dash-equal .card-body.scroll-list .timeline-list li { padding: 0.45rem 0; }
.card-header .card-count { font-size: 0.8rem; color: var(--sm-muted); margin-left: 0.5rem; font-weight: 500; }

/* Sidebar: current study submenu */
.nav-sidebar .nav-header-study { display: flex; align-items: center; justify-content: space-between; padding-right: 0.35rem; }
.nav-sidebar .nav-study-leave { color: var(--sm-sidebar-muted); font-size: 1.067rem; line-height: 1; padding: 0 0.3rem; border-radius: 4px; text-decoration: none; }
.nav-sidebar .nav-study-leave:hover { color: #fff; background: var(--sm-sidebar-hover); }
.nav-sidebar .nav-study-name p { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nav-sidebar .nav-study-name .nav-study-title { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.nav-sidebar .nav-study-name .nav-study-sub { font-size: 0.8rem; font-weight: 500; color: var(--sm-sidebar-muted); overflow: hidden; text-overflow: ellipsis; }
.nav-sidebar .nav-study-menu { display: block; list-style: none; margin: 2px 0 0 1.1rem; padding: 0 0 0 0.55rem; border-left: 1px solid rgba(255, 255, 255, 0.09); min-width: 0; }
.nav-sidebar .nav-study-menu .nav-item { display: block; width: 100%; margin-bottom: 1px; min-width: 0; }
.nav-sidebar .nav-study-menu .nav-link { display: flex; width: 100%; min-width: 0; padding: 0.36rem 0.6rem; font-size: 0.867rem; font-weight: 450; gap: 0.6rem; }
.nav-sidebar .nav-study-menu .nav-link p { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-sidebar .nav-study-menu .nav-link .nav-count { flex: 0 0 auto; }
.nav-sidebar .nav-study-menu .nav-link .nav-icon { font-size: 0.8rem; width: 1.1rem; }
.nav-sidebar .nav-study-menu .nav-link.active { background: var(--sm-sidebar-active) !important; color: #fff !important; }
.nav-sidebar .nav-study-menu .nav-link.active .nav-icon { color: #60a5fa; }
.nav-sidebar .nav-study-menu .nav-study-more { width: 100%; border: 0; background: transparent; color: var(--sm-sidebar-muted) !important; font-size: 0.8rem; text-align: left; }
.nav-sidebar .nav-study-menu .nav-study-more:hover { color: #fff !important; }
.nav-sidebar .nav-study-menu:not(.is-open) .nav-study-secondary:not(.has-active) { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-study-menu,

/* Study overview: uniform KPI tiles, stat strips, two-column masonry below */
.kpi-grid { align-items: stretch; }
.kpi .kpi-value-sm { font-size: 1.067rem; white-space: nowrap; }
.kpi .kpi-label-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi, .kpi > span { min-width: 0; }
.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.85rem; }
.kpi-grid-6 .kpi { padding: 0.9rem 1rem; gap: 0.7rem; }
.kpi-grid-6 .kpi .kpi-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 1rem; }
@media (max-width: 1599px) { .kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ov-cols { display: flex; gap: 1.25rem; align-items: flex-start; }
.ov-cols > .ov-col { flex: 1 1 0; min-width: 0; }
.ov-cols .ov-item { margin-bottom: 1.25rem; }
.ov-cols .card, .ov-cols .analytics-card { height: auto; margin-bottom: 0; }
.study-team .team-groups { columns: 2; column-gap: 1.5rem; }
.study-team .team-group { break-inside: avoid; page-break-inside: avoid; margin-bottom: 1rem; }
@media (max-width: 1199px) { .ov-cols { display: block; } }
/* Overview layouts: columns (everything visible) or tabs (one section at a time, .ov-item[data-panel]) */
.ov-layout .ov-tabs { margin-bottom: 1.25rem; }
.ov-layout.mode-cols .ov-tabs { display: none; }
.ov-layout.mode-tabs .ov-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.ov-layout.mode-tabs .ov-cols > .ov-col { display: contents; }
.ov-layout.mode-tabs .ov-item { display: none; margin-bottom: 0; }
.ov-layout.mode-tabs .ov-item.is-shown { display: block; }
.ov-layout.mode-tabs.is-single .ov-item.is-shown { grid-column: 1 / -1; }
.ov-layout .ov-tabs .badge { font-size: 0.8rem; vertical-align: middle; }
@media (max-width: 1199px) { .ov-layout.mode-tabs .ov-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .study-team .team-groups { columns: 1; } }
/* Delegation log: delegated tasks as a plain wrapping list; badges stay for status */
.team-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 0.267rem; min-width: 16rem; font-size: 0.867rem; line-height: 1.2rem; color: var(--sm-text-2); }
.team-task-list li:not(:last-child)::after { content: '\00b7'; margin: 0 0.4rem; color: var(--sm-faint); }
.team-person { min-width: 12rem; }

/* Protocol card facts */
.fact-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem 1rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--sm-border); }
.fact-tiles .fact { min-width: 0; }
.fact-tiles .fact-l { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-muted); }
.fact-tiles .fact-v { display: block; margin-top: 0.15rem; font-size: 0.933rem; font-weight: 500; color: var(--sm-text); overflow-wrap: anywhere; }
.fact-tiles .fact-v .badge { vertical-align: middle; }
.fact-tiles .fact-set { font-weight: 500; color: var(--sm-primary); }
.fact-tiles .fact-set::after { content: ' \2192'; }
.fact-tiles .fact-set-locked { color: var(--sm-muted); }
.fact-tiles .fact-set-locked::after { content: none; }
@media (max-width: 575px) { .fact-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Study status dots */
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; background: var(--sm-faint); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.status-dot.is-active { background: var(--sm-success); }
.status-dot.is-draft { background: #fff; box-shadow: inset 0 0 0 2px #64748b; }
.status-dot.is-pending { background: var(--sm-warning); }
.status-dot.is-hold { background: #f97316; }
.status-dot.is-done { background: var(--sm-primary); }
.status-dot.is-stopped { background: var(--sm-danger); }
.status-dot.is-archived { background: #475569; }
.status-dot.is-other { background: var(--sm-purple); }
.study-card-status { font-size: 0.867rem; font-weight: 500; color: var(--sm-text-2); white-space: nowrap; }
.status-chips .chip .status-dot { margin-right: 0.35rem; box-shadow: none; }

/* Permission matrix */
.perm-table { font-size: 0.867rem; }
.perm-table th, .perm-table td { vertical-align: middle; }
.perm-table thead th { position: sticky; top: 0; z-index: 2; background: var(--sm-card-head); }
.perm-table .perm-cap { min-width: 260px; position: sticky; left: 0; background: #fff; z-index: 1; }
.perm-table thead .perm-cap { z-index: 3; background: var(--sm-card-head); }
.perm-table .perm-role { text-align: center; width: 9.5rem; }
.perm-table .perm-role-name { display: block; font-weight: 600; font-size: 0.8rem; }
.perm-table .perm-role-n { display: block; font-size: 0.8rem; font-weight: 500; color: var(--sm-muted); }
.perm-table .perm-role.is-admin { background: var(--sm-primary-soft); }
.perm-table .perm-section td { background: var(--sm-bg); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-muted); padding: 0.45rem 0.75rem; position: sticky; left: 0; }
.perm-table .perm-label { font-weight: 500; color: var(--sm-text); }
.perm-table .perm-desc { font-size: 0.8rem; color: var(--sm-muted); line-height: 1.35; }
.perm-table .perm-cell { text-align: center; white-space: nowrap; }
.perm-table .perm-cell.is-admin { background: rgba(37, 99, 235, 0.04); }
.perm-table .perm-cell .fa-check { color: var(--sm-success); }
.perm-table .perm-cell .perm-off { color: var(--sm-faint); }
.perm-table .perm-cell .perm-lock { font-size: 0.6rem; color: var(--sm-faint); margin-left: 0.3rem; }
.perm-toggle { display: inline-block; margin: 0; cursor: pointer; }
.perm-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.perm-toggle .perm-box { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--sm-border-strong); border-radius: 6px; background: #fff; color: transparent; transition: background .12s ease, border-color .12s ease; }
.perm-toggle input:checked + .perm-box { background: var(--sm-success); border-color: var(--sm-success); color: #fff; }
.perm-toggle input:focus-visible + .perm-box { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.perm-cell.is-changed .perm-box { box-shadow: 0 0 0 2px var(--sm-warning); }
.perm-cell.is-changed.is-on .perm-box { background: var(--sm-warning); border-color: var(--sm-warning); }
.perm-legend { font-size: 0.8rem; color: var(--sm-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.perm-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.perm-key-on { background: var(--sm-success); }
.perm-key-changed { background: var(--sm-warning); margin-left: 0.6rem; }

/* Study <-> centre link checklists (studies/_centers_modal, subjects/_studies_modal) */
.link-tools { display: flex; align-items: center; gap: .25rem; margin-bottom: .6rem; }
.link-tools .link-filter { flex: 1 1 auto; min-width: 0; }
.link-tools .btn-link { padding: .15rem .4rem; font-size: .8rem; }
.link-list { max-height: 24rem; overflow-y: auto; border: 1px solid var(--sm-card-border); border-radius: .375rem; }
.link-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .75rem; align-items: center; margin: 0; padding: .5rem .75rem; border-bottom: 1px solid var(--sm-card-border); cursor: pointer; font-weight: 400; }
.link-item:last-child { border-bottom: 0; }
.link-item:hover { background: var(--sm-card-head); }
.link-item.is-locked { cursor: default; background: #f8fafc; }
.link-item[hidden] { display: none; }
.link-item input[type="checkbox"] { margin: 0; }
.link-text { display: flex; flex-direction: column; min-width: 0; }
.link-main { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.link-status { font-weight: 400; font-size: .8rem; color: #6c757d; }
.link-sub { font-size: .8rem; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-meta { font-size: .8rem; color: #6c757d; text-align: right; white-space: nowrap; }

/* Studies directory: autocomplete under the search box, grouped by property */
.studies-tools .search-box { position: relative; }
.search-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 320px; z-index: 1030; background: #fff; border: 1px solid var(--sm-card-border); border-radius: .4rem; box-shadow: var(--sm-shadow); max-height: 22rem; overflow-y: auto; padding: .25rem 0; text-align: left; }
.search-suggest .suggest-group { padding: .4rem .75rem .2rem; font-size: 0.8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sm-faint); }
.search-suggest .suggest-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .4rem .75rem; border: 0; background: none; color: inherit; font-size: 0.867rem; text-align: left; text-decoration: none; cursor: pointer; }
.search-suggest .suggest-item:hover, .search-suggest .suggest-item.is-active { background: var(--sm-card-head); color: inherit; text-decoration: none; }
.search-suggest .suggest-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest .suggest-text mark { padding: 0; background: #fff3bf; }
.search-suggest .suggest-meta { flex: 0 0 auto; font-size: 0.8rem; color: var(--sm-faint); white-space: nowrap; }

/* Step wizards (assets/js/wizard.js): study creation, subject registration, centre enrolment */
.wizard-steps { display: flex; list-style: none; margin: 0 0 1rem; padding: 0; background: #fff; border: 1px solid var(--sm-card-border); border-radius: .5rem; overflow-x: auto; }
.wizard-step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border: 0; border-right: 1px solid var(--sm-card-border); background: none; color: var(--sm-muted); font-size: 0.867rem; text-align: left; cursor: pointer; }
.wizard-step:last-child { border-right: 0; }
.wizard-step:disabled { cursor: default; opacity: .55; }
.wizard-step .num { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--sm-card-border); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 650; background: #fff; }
.wizard-step .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard-step.is-current { color: var(--sm-text); font-weight: 600; background: var(--sm-card-head); }
.wizard-step.is-current .num { border-color: var(--sm-primary); background: var(--sm-primary); color: #fff; }
.wizard-step.is-done .num { border-color: var(--sm-primary); color: var(--sm-primary); font-size: 0; }
.wizard-step.is-done .num::after { content: "\2713"; font-size: .8rem; }
.wizard-pane[hidden] { display: none; }
.wizard-pane .card-footer, .card-footer.form-footer { display: flex; align-items: center; gap: .5rem; }
.wizard-pane .card-footer .hint, .card-footer.form-footer .hint { font-size: .8rem; color: var(--sm-muted); margin-right: auto; }
.wizard-error { margin: 0 0 .75rem; }
.is-invalid-group { outline: 2px solid #dc3545; outline-offset: 2px; border-radius: .375rem; }
dl.review-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1.5rem; margin: 0; }
dl.review-grid dt { font-weight: 500; color: var(--sm-muted); font-size: 0.867rem; }
dl.review-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
dl.review-grid dd.is-empty { font-weight: 400; color: var(--sm-faint); }
.review-section { margin-bottom: 1.25rem; }
.review-section h6 { font-size: 0.8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sm-faint); font-weight: 700; margin-bottom: .5rem; }
.wizard .link-list { max-height: 26rem; }
@media (max-width: 767px) {
    .wizard-step { padding: .6rem .7rem; }
    .wizard-step .lbl { display: none; }
    .wizard-step.is-current .lbl { display: inline; }
    dl.review-grid { grid-template-columns: 1fr; gap: .15rem; }
    dl.review-grid dd { margin-bottom: .5rem; }
}

/* Subject consent page (subjects/consent.php) */
.consent-record { padding: .85rem 0 1rem; border-bottom: 1px solid var(--sm-card-border); }
.consent-record:last-child { border-bottom: 0; }
.consent-record.is-withdrawn .consent-version { text-decoration: line-through; color: var(--sm-muted); }
.consent-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .5rem; }
.consent-version { font-weight: 650; font-size: 1rem; }
.consent-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem 1rem; margin: 0 0 .75rem; font-size: 0.867rem; }
.consent-facts dt { font-weight: 500; color: var(--sm-muted); }
.consent-facts dd { margin: 0; }
.scan-block { background: #f8fafc; border: 1px dashed var(--sm-card-border); border-radius: .5rem; padding: .6rem .75rem; }
.scan-title { font-size: .8rem; font-weight: 600; margin-bottom: .4rem; }
.scan-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.scan-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .75rem; align-items: center; background: #fff; border: 1px solid var(--sm-card-border); border-radius: .4rem; padding: .35rem .5rem; }
.scan-thumb { width: 56px; height: 56px; border-radius: .3rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #eef2f7; color: var(--sm-muted); font-size: 1.5rem; }
.scan-thumb img { width: 100%; height: 100%; object-fit: cover; }
.scan-name { font-weight: 600; overflow-wrap: anywhere; }
.scan-actions { display: flex; gap: .25rem; }
.scan-upload { display: flex; align-items: center; flex-wrap: wrap; }
.icf-body { font-family: var(--sm-font); font-size: 0.933rem; line-height: 1.5; }

/* ---- protocol lock ---- */
.proto-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; margin-bottom: 1rem; border: 1px solid var(--sm-border); border-radius: 10px; background: var(--sm-surface); font-size: 0.867rem; }
.proto-banner .proto-ico { font-size: 1rem; color: var(--sm-muted); }
.proto-banner.is-locked { border-color: #a7dcc6; background: var(--sm-success-soft); }
.proto-banner.is-locked .proto-ico { color: var(--sm-success); }
.proto-banner.is-open { border-color: #f5d58a; background: #fff8e6; }
.proto-banner.is-open .proto-ico { color: #b7791f; }
.proto-banner .proto-text { min-width: 0; }
.proto-state.is-locked .card-header { background: var(--sm-success-soft); }
.proto-state.is-open .card-header { background: #fff8e6; }
.proto-live { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.933rem; color: var(--sm-text-2); }
.proto-live strong { color: var(--sm-text); }
.proto-snap { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.867rem; padding: 0.35rem 0; }
.proto-snap .snap-h { display: inline-block; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 0.8rem; color: var(--sm-muted); margin-right: 0.35rem; }
@media (max-width: 575.98px) { .proto-banner { flex-wrap: wrap; } .proto-banner .btn { margin-left: 0 !important; } }

/* ---- study designer ---- */
.ep-tools { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.9rem; }
.ep-tools input[type="search"] { flex: 1 1 260px; }
.ep-cats { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ep-cat { border: 1px solid var(--sm-border); background: var(--sm-surface); color: var(--sm-text-2); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.8rem; }
.ep-cat.active { background: var(--sm-primary); border-color: var(--sm-primary); color: #fff; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.ep-card { text-align: left; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.7rem 0.8rem; border: 1px solid var(--sm-border); border-radius: 10px; background: var(--sm-surface); color: var(--sm-text); transition: border-color .12s, box-shadow .12s; }
.ep-card:hover { border-color: var(--sm-primary); }
.ep-card.is-selected { border-color: var(--sm-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); background: var(--sm-primary-soft, #eef3ff); }
.ep-card .ep-name { font-weight: 600; font-size: 0.933rem; }
.ep-card .ep-desc { font-size: 0.8rem; color: var(--sm-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ep-card .ep-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: auto; }
.ep-card-custom { border-style: dashed; }
.ep-picked { border-top: 1px solid var(--sm-border); padding-top: 1rem; }
.d-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem 0.9rem; }
.d-param label { font-size: 0.867rem; font-weight: 600; margin-bottom: 0.15rem; }
.d-param .form-text { font-size: 0.8rem; line-height: 1.25; }
.btn-xs { padding: 0.1rem 0.5rem; font-size: 0.8rem; border-radius: 999px; }
.design-live { position: sticky; top: 1rem; border: 1px solid var(--sm-border); border-radius: 12px; padding: 1rem 1.1rem; background: var(--sm-surface); }
.design-big { display: flex; align-items: baseline; gap: 0.6rem; }
.design-n { font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--sm-primary); font-variant-numeric: tabular-nums; }
.design-unit { color: var(--sm-text-2); }
.design-sub { color: var(--sm-text-2); font-size: 0.933rem; margin: 0.3rem 0 0.6rem; }
.design-lines { padding-left: 1.1rem; font-size: 0.867rem; margin-bottom: 0.8rem; }
.sens-table th, .sens-table td { font-size: 0.8rem; padding: 0.25rem 0.5rem; font-variant-numeric: tabular-nums; }
.sens-table tr.is-base td { font-weight: 700; background: var(--sm-primary-soft, #eef3ff); }
.review-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; }
.review-list .review-item { padding: 0.6rem 1rem; border-top: 1px solid var(--sm-border); }
.review-list .review-item:first-child { border-top: 0; }
.review-list .review-item.is-resolved { opacity: 0.65; }
.review-list .review-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.2rem; }
.review-list .review-text { font-size: 0.867rem; white-space: pre-line; }
.review-form { display: flex; gap: 0.4rem; align-items: center; }
.review-form select { flex: 0 0 170px; }
.review-form input { flex: 1 1 auto; }
@media (max-width: 575.98px) { .review-form { flex-wrap: wrap; } .review-form select { flex-basis: 100%; } }

/* Centres: directory filter bar, closed cards, staff checklist, danger zone */
.centers-tools { margin-bottom: 1rem; }
.centers-tools .link-filter { max-width: 26rem; }
.centers-grid .study-card-col.is-inactive { display: none; }
.centers-grid.show-inactive .study-card-col.is-inactive { display: block; }
.centers-grid .study-card-col.is-inactive .study-card { opacity: .72; }
.link-item.is-site { background: rgba(37, 99, 235, .03); }
.danger-zone .card-header { background: rgba(220, 38, 38, .05); }
.staff-pane .card-header .card-hint { margin-left: auto; }
.staff-list { list-style: none; margin: 0; padding: 0; }
/* The picker of people to add keeps a bounded list under its search box; the
   people already at the centre are listed in full with the page. */
.staff-list-tall { max-height: 34rem; overflow-y: auto; }
.staff-row { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; border-top: 1px solid var(--sm-card-border); }
.staff-row:first-child { border-top: 0; }
.staff-row .team-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.staff-row .avatar-initials.team-avatar { font-size: .85rem; }
.staff-row .staff-body { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.staff-row .staff-name { font-weight: 600; font-size: 0.933rem; color: var(--sm-text); }
.staff-row .staff-link { color: inherit; }
.staff-row .staff-link:hover { color: var(--sm-primary-600); text-decoration: underline; }
.staff-row .staff-user { font-weight: 400; font-size: 0.8rem; color: var(--sm-muted); }
.staff-record { color: var(--sm-muted); margin-left: .15rem; }
.staff-record:hover { color: var(--sm-primary-600); }
.staff-row .staff-sub { font-size: 0.8rem; color: var(--sm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-row .staff-role.is-site { color: var(--sm-primary); font-weight: 600; }
.staff-row.is-pending { background: rgba(37, 99, 235, .04); }
.staff-row.is-inactive .staff-name { color: var(--sm-muted); }
.staff-row .staff-act { flex: 0 0 auto; white-space: nowrap; }
.staff-empty { padding: 1.25rem 1rem; color: var(--sm-muted); font-size: 0.867rem; text-align: center; }
.staff-picker #staffSearch { font-size: 0.933rem; }

/* Form library */
.lib-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.lib-toolbar #libSearch { flex: 1 1 18rem; min-width: 0; }
.lib-study { display: flex; align-items: center; gap: .5rem; flex: 0 1 26rem; }
.lib-study .custom-select { min-width: 0; }
.lib-n { font-weight: 400; opacity: .7; margin-left: .15rem; }
.lib-area { margin-top: 1.25rem; }
.lib-area-title { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; display: flex; align-items: baseline; flex-wrap: wrap; }
.lib-card { cursor: pointer; margin: 0; font-weight: 400; }
.lib-card[hidden] { display: none; }
.lib-card-head { display: flex; align-items: flex-start; gap: .5rem; }
.lib-card-head .lib-check { margin-top: .3rem; flex: 0 0 auto; }
.lib-card .ep-desc { -webkit-line-clamp: 2; }
.lib-card .ep-meta { width: 100%; }
.lib-used { display: block; }
.lib-card-saved { cursor: default; }
.lib-bar { position: sticky; bottom: 0; z-index: 5; margin-top: 1.25rem; display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--sm-surface); border: 1px solid var(--sm-primary); border-radius: .5rem; box-shadow: 0 -4px 16px rgba(15, 23, 42, .08); }
.lib-bar-names { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-preview-table th { font-size: 0.8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sm-faint); background: var(--sm-card-head); }
.lib-empty { margin-top: 1.25rem; }

/* Kaplan-Meier summary box (hazard ratio, log-rank, median) */
.km-box { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(255, 255, 255, .92); border: 1px solid var(--sm-border); border-radius: .5rem; padding: .45rem .7rem; font-size: 0.8rem; line-height: 1.3; box-shadow: 0 2px 8px rgba(15, 23, 42, .06); pointer-events: none; max-width: 300px; }
.km-box-row { display: flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
.km-box-row + .km-box-row { margin-top: .15rem; }
.km-box-row.is-muted { color: var(--sm-muted); }
.km-box-label { font-size: 0.8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sm-faint); min-width: 3.4rem; }
.km-box-value { font-weight: 700; font-size: 0.933rem; color: var(--sm-text); font-variant-numeric: tabular-nums; }
.km-box-detail { color: var(--sm-muted); }

/* --------------------------------------------------------------------------
   Search page
   -------------------------------------------------------------------------- */
.search-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.search-form .search-q { flex: 1 1 260px; }
.search-form .search-q input { font-size: 1.067rem; }
.search-form .search-filter { flex: 0 1 220px; }
.search-form label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sm-muted); margin-bottom: 0.25rem; }
.search-hint { font-size: 0.8rem; color: var(--sm-muted); margin-top: 0.6rem; }
.search-section { margin-top: 1.25rem; }
.search-section h2 { font-size: 0.933rem; font-weight: 650; margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.search-section h2 .badge { font-weight: 600; }
.search-table td, .search-table th { vertical-align: middle; }
.search-table mark { background: #fff1a8; padding: 0 0.1em; border-radius: 2px; }
.search-empty { text-align: center; color: var(--sm-muted); padding: 2rem 1rem; }
.search-empty i { font-size: 1.6rem; color: var(--sm-faint); display: block; margin-bottom: 0.5rem; }

/* Sortable table headers (app.js table.table-sortable) */
th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.is-sortable::after { content: "\f0dc"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.65rem; margin-left: 0.35rem; color: var(--sm-faint); }
th.is-sortable[aria-sort="ascending"]::after { content: "\f0de"; color: var(--sm-primary); }
th.is-sortable[aria-sort="descending"]::after { content: "\f0dd"; color: var(--sm-primary); }
th.is-sortable:hover { color: var(--sm-text); }

/* Toasts (AdminLTE toastr) sit below the top bar and follow the app palette */
#toast-container.toast-top-right { top: 68px; right: 16px; }
#toast-container > .toast { border-radius: var(--sm-radius); box-shadow: var(--sm-shadow-md); opacity: 1; font-size: 0.933rem; padding-left: 52px; }
#toast-container > .toast-success { background-color: #16a34a; }
#toast-container > .toast-error { background-color: #dc2626; }
#toast-container > .toast-warning { background-color: #d97706; }
#toast-container > .toast-info { background-color: #2563eb; }

/* Top-bar notifications */
.notif-toggle { position: relative; font-size: 1.067rem; padding: 0.5rem 0.65rem !important; }
.notif-toggle::after { display: none; }
.notif-badge { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--sm-danger); color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--sm-surface); }
.notif-panel { width: 380px; max-width: calc(100vw - 24px); padding: 0; border: 1px solid var(--sm-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; font-weight: 600; font-size: 0.867rem; color: var(--sm-text); border-bottom: 1px solid var(--sm-border); }
.notif-head-count { font-size: 0.8rem; font-weight: 600; color: var(--sm-muted); background: var(--sm-bg); border-radius: 999px; padding: 0.1rem 0.5rem; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 0.6rem; align-items: start; padding: 0.65rem 1rem; border-bottom: 1px solid var(--sm-border); color: var(--sm-text); text-decoration: none !important; }
.notif-item:hover { background: var(--sm-bg); }
.notif-item.is-unseen { background: var(--sm-primary-soft); }
.notif-item.is-unseen:hover { background: #dbe6ff; }
.notif-icon { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; background: var(--sm-bg); color: var(--sm-text-2); }
.notif-item.tone-danger .notif-icon { background: #fee2e2; color: #b91c1c; }
.notif-item.tone-warning .notif-icon { background: #fef3c7; color: #b45309; }
.notif-item.tone-primary .notif-icon { background: var(--sm-primary-soft); color: var(--sm-primary); }
.notif-item.tone-info .notif-icon { background: #e0f2fe; color: #0369a1; }
.notif-text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.notif-title { font-size: 0.867rem; font-weight: 600; line-height: 1.25; }
.notif-sub { font-size: 0.8rem; color: var(--sm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-at { font-size: 0.8rem; color: var(--sm-faint); white-space: nowrap; padding-top: 0.15rem; }
.notif-empty { padding: 1.4rem 1rem; text-align: center; color: var(--sm-muted); font-size: 0.867rem; }
.notif-empty i { display: block; font-size: 1.5rem; margin-bottom: 0.4rem; color: var(--sm-success); }
.notif-foot { display: block; padding: 0.6rem 1rem; font-size: 0.867rem; font-weight: 500; text-align: center; border-top: 1px solid var(--sm-border); background: var(--sm-bg); }

/* Query page: facts panel + chat thread */
.dq-context .card-body { padding: 0; }
.dq-facts { display: block; margin: 0; font-size: 0.933rem; }
.dq-facts-group { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--sm-border); }
.dq-facts-group:last-child { border-bottom: 0; }
.dq-facts-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-faint); margin-bottom: 0.45rem; }
.dq-fact { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.15rem 0.6rem; padding: 0.22rem 0; align-items: baseline; }
.dq-fact dt { font-weight: 500; color: var(--sm-muted); font-size: 0.867rem; margin: 0; }
.dq-fact dd { margin: 0; color: var(--sm-text); font-weight: 500; overflow-wrap: anywhere; }
.dq-fact dd .dq-id { font-size: 0.8rem; color: var(--sm-faint); font-weight: 400; }
.dq-values { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem; align-items: center; margin-top: 0.3rem; }
.dq-value { background: var(--sm-bg); border: 1px solid var(--sm-border); border-radius: 8px; padding: 0.45rem 0.6rem; min-width: 0; }
.dq-value .lbl { display: block; font-size: 0.8rem; color: var(--sm-muted); margin-bottom: 0.15rem; }
.dq-value .val { display: block; font-weight: 600; overflow-wrap: anywhere; }
.dq-value .val.is-empty { color: var(--sm-faint); font-weight: 400; font-style: italic; }
.dq-values .arrow { color: var(--sm-faint); font-size: 0.8rem; }
.dq-value.is-changed { border-color: var(--sm-primary); background: var(--sm-primary-soft); }
.dq-timeline { list-style: none; margin: 0; padding: 0; }
.dq-timeline li { display: grid; grid-template-columns: 18px 1fr; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.867rem; }
.dq-timeline .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 0.35rem; background: var(--sm-border-strong); justify-self: center; }
.dq-timeline .dot.raised { background: var(--sm-danger); }
.dq-timeline .dot.answered { background: var(--sm-warning); }
.dq-timeline .dot.closed { background: var(--sm-success); }
.dq-timeline .when { font-weight: 600; color: var(--sm-text); }
.dq-timeline .who { display: flex; align-items: center; gap: 0.35rem; color: var(--sm-muted); font-size: 0.8rem; margin-top: 0.1rem; }

.dq-thread { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.25rem 1rem; background: var(--sm-bg); }
.dq-msg { display: flex; align-items: flex-end; gap: 0.6rem; max-width: 78%; border: 0; padding: 0; background: transparent; }
.dq-msg.is-right { align-self: flex-end; flex-direction: row-reverse; }
.dq-msg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dq-msg.is-right .dq-msg-main { align-items: flex-end; }
.dq-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0.35rem; font-size: 0.8rem; color: var(--sm-muted); }
.dq-msg-head strong { color: var(--sm-text); font-size: 0.867rem; }
.dq-msg-body { position: relative; font-size: 0.933rem; line-height: 1.5; padding: 0.7rem 0.95rem; border-radius: 16px; background: var(--sm-surface); border: 1px solid var(--sm-border); color: var(--sm-text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.dq-msg:not(.is-right) .dq-msg-body { border-bottom-left-radius: 4px; }
.dq-msg.is-right .dq-msg-body { border-bottom-right-radius: 4px; }
.dq-msg.is-mine .dq-msg-body { background: var(--sm-primary); border-color: var(--sm-primary); color: #fff; }
.dq-msg-question .dq-msg-body { border-left: 3px solid var(--sm-danger); }
.dq-msg-answer:not(.is-mine) .dq-msg-body { border-right: 3px solid var(--sm-warning); }
.dq-msg-time { font-size: 0.8rem; color: var(--sm-faint); margin: 0 0.35rem; }
.dq-event { align-self: center; display: inline-flex; align-items: center; gap: 0.4rem; max-width: 90%; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--sm-surface); border: 1px solid var(--sm-border); font-size: 0.8rem; color: var(--sm-text-2); }
.dq-event i { font-size: 0.75rem; }
.dq-event.close { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.dq-event.reopen, .dq-event.cancel { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.dq-event .dq-event-note { font-style: italic; color: var(--sm-muted); }
.dq-day { align-self: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sm-faint); margin: 0.25rem 0 -0.4rem; }
.dq-compose { padding: 0.9rem 1.25rem 1rem; border-top: 1px solid var(--sm-border); background: var(--sm-surface); }
.dq-compose textarea { border-radius: 12px; resize: vertical; min-height: 84px; }
.dq-compose-hint { font-size: 0.8rem; color: var(--sm-muted); margin-top: 0.35rem; }
@media (max-width: 767.98px) { .dq-msg { max-width: 94%; } .dq-fact { grid-template-columns: 1fr; } }

/* Segmented toggles (Cards / List, Columns / Tabs): the chosen option is filled */
.btn-group .btn-outline-secondary[aria-pressed] { color: var(--sm-text-2) !important; background: var(--sm-surface) !important; border-color: var(--sm-border-strong); }
.btn-group .btn-outline-secondary[aria-pressed]:hover { background: var(--sm-bg) !important; color: var(--sm-text) !important; }
.btn-group .btn-outline-secondary[aria-pressed="true"], .btn-group .btn-outline-secondary[aria-pressed="true"]:hover { background: var(--sm-primary) !important; border-color: var(--sm-primary) !important; color: #fff !important; font-weight: 600; box-shadow: none; }
.btn-group .btn-outline-secondary[aria-pressed="true"] i { color: #fff; }

/* Centre page: accrual drill-down */
.accrual-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.accrual-tools select { width: auto; max-width: 100%; }
.accrual-hint { font-size: 0.8rem; }
.accrual-drill { margin-top: 0.9rem; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); background: var(--sm-surface); }
.accrual-drill-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--sm-border); background: var(--sm-bg); font-size: 0.867rem; border-radius: var(--sm-radius-sm) var(--sm-radius-sm) 0 0; }
.accrual-drill-head a { font-size: 0.8rem; }
.accrual-drill-table td, .accrual-drill-table th { font-size: 0.867rem; vertical-align: middle; }
.accrual-drill .table-responsive { max-height: 320px; overflow-y: auto; }

/* Centre staff: assignment history */
.staff-row .staff-since { color: var(--sm-muted); font-size: 0.8rem; }
.staff-former .card-header .card-hint { margin-left: auto; }
.staff-former-table td, .staff-former-table th { font-size: 0.867rem; vertical-align: middle; }
.staff-former-who { display: flex; align-items: center; gap: 0.55rem; }
.staff-former-who .team-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.staff-former-who .avatar-initials.team-avatar { font-size: 0.78rem; }
.staff-former-who .staff-user { font-size: 0.8rem; color: var(--sm-muted); }
.team-former summary { cursor: pointer; font-size: 0.867rem; color: var(--sm-muted); list-style: none; }
.team-former summary::-webkit-details-marker { display: none; }
.team-former[open] summary { margin-bottom: 0.5rem; }
.team-former-list li { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; padding: 0.3rem 0; border-top: 1px solid var(--sm-card-border); font-size: 0.867rem; }
.team-former-list .tf-name { font-weight: 600; }
.team-former-list .tf-role { color: var(--sm-muted); }
.team-former-list .tf-period { margin-left: auto; color: var(--sm-muted); font-variant-numeric: tabular-nums; }

/* Side panel: a drill-down that slides in from the right, for lists too long
   for a dialog. The page stays visible behind it, so the chart a count came
   from is still on screen while its subjects are read. */
.side-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--sm-surface); border-left: 1px solid var(--sm-border); box-shadow: -8px 0 28px rgba(16, 24, 40, 0.12); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.18s ease-out, visibility 0.18s; z-index: 1045; }
/* A parked panel is off screen but still laid out, so without this its
   controls stay in the page's tab order: a closed at-risk panel held 13
   subject links a keyboard user could reach. */
.side-panel[aria-hidden="true"] { visibility: hidden; }
.side-panel[aria-hidden="false"] { visibility: visible; transform: translateX(0); }
.side-panel-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.18s ease-out; z-index: 1044; }
.side-panel-backdrop.is-open { opacity: 1; pointer-events: auto; }
.side-panel.side-panel-wide { width: min(760px, 100vw); }
.side-panel-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--sm-border); }
.side-panel-head h5 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.side-panel-head .close { margin-left: auto; font-size: 1.4rem; line-height: 1; background: none; border: 0; color: var(--sm-muted); cursor: pointer; }
.side-panel-head .close:hover { color: var(--sm-text); }
.side-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.side-panel-foot { display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--sm-border); padding: 0.7rem 1.1rem; font-size: 0.867rem; color: var(--sm-muted); }
@media (prefers-reduced-motion: reduce) { .side-panel, .side-panel-backdrop { transition: none; } }
@media (max-width: 575.98px) { .side-panel, .side-panel.side-panel-wide { width: 100vw; } }

/* --------------------------------------------------------------------------
   Messages: page (list | conversation), chat dock in the corner
   -------------------------------------------------------------------------- */
.msg-toggle { position: relative; font-size: 1.067rem; padding: 0.5rem 0.65rem !important; }
.msg-toggle.active { color: var(--sm-primary) !important; }

.msg-shell { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; height: calc(100vh - 200px); min-height: 480px; background: var(--sm-surface); border: 1px solid var(--sm-card-border); border-radius: 12px; overflow: hidden; }
.msg-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--sm-border); background: var(--sm-surface); }
.msg-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sm-bg); }
.msg-search { position: relative; padding: 0.75rem 0.75rem 0.5rem; }
.msg-search i { position: absolute; left: 1.45rem; top: 50%; transform: translateY(-25%); color: var(--sm-faint); font-size: 0.8rem; pointer-events: none; }
.msg-search input { width: 100%; height: 36px; padding: 0 0.75rem 0 2rem; border: 1px solid var(--sm-border); border-radius: 999px; background: var(--sm-bg); font-size: 0.867rem; color: var(--sm-text); }
.msg-search input:focus { outline: none; border-color: var(--sm-primary); background: var(--sm-surface); box-shadow: 0 0 0 3px var(--sm-primary-soft); }
.msg-boxes { display: flex; gap: 0.25rem; padding: 0 0.75rem 0.5rem; border-bottom: 1px solid var(--sm-border); }
.msg-boxes a { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--sm-text-2); }
.msg-boxes a:hover { background: var(--sm-bg); text-decoration: none; }
.msg-boxes a.active { background: var(--sm-primary-soft); color: var(--sm-primary-600); }
.msg-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.msg-list-empty { padding: 2rem 1rem; text-align: center; color: var(--sm-muted); font-size: 0.867rem; }
.msg-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--sm-border); font-size: 0.8rem; color: var(--sm-muted); }

.msg-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 0.65rem; align-items: center; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--sm-border); color: var(--sm-text); text-decoration: none !important; position: relative; }
.msg-item:hover { background: var(--sm-bg); }
.msg-item.is-active { background: var(--sm-primary-soft); }
.msg-item.is-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sm-primary); }
.msg-item-avatar { display: flex; }
.msg-item-main { min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.msg-item-top { display: flex; align-items: baseline; gap: 0.5rem; }
.msg-item-names { flex: 1 1 auto; min-width: 0; font-size: 0.867rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-at { flex: 0 0 auto; font-size: 0.8rem; color: var(--sm-faint); font-variant-numeric: tabular-nums; }
.msg-item-subject { font-size: 0.8rem; font-weight: 500; color: var(--sm-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-snippet { font-size: 0.8rem; color: var(--sm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item.is-unread .msg-item-names, .msg-item.is-unread .msg-item-subject { font-weight: 700; color: var(--sm-text); }
.msg-item.is-unread .msg-item-snippet { color: var(--sm-text-2); }
.msg-item.is-unread .msg-item-at { color: var(--sm-primary); font-weight: 600; }
.msg-item-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sm-primary); color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 20px; text-align: center; }

.msg-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.avatar-initials.msg-avatar { font-size: 0.9rem; }
.msg-avatar-sm, .avatar-initials.msg-avatar-sm { width: 30px; height: 30px; font-size: 0.72rem; }
.msg-group-avatar { position: relative; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sm-bg); color: var(--sm-text-2); border: 1px solid var(--sm-border); font-size: 0.85rem; }
.msg-group-avatar span { position: absolute; right: -3px; bottom: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--sm-text-2); color: #fff; font-size: 0.6rem; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--sm-surface); }
.msg-group-avatar.msg-avatar-sm { width: 30px; height: 30px; font-size: 0.72rem; }

.msg-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--sm-surface); border-bottom: 1px solid var(--sm-border); }
.msg-head-text { flex: 1 1 auto; min-width: 0; }
.msg-head h2 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-people { display: flex; flex-wrap: wrap; gap: 0 0.35rem; font-size: 0.8rem; color: var(--sm-muted); }
.msg-person:not(:last-child)::after { content: ','; }
.msg-person.is-gone { text-decoration: line-through; }
.msg-person.is-gone small { text-decoration: none; }
.msg-head-action { margin: 0; }
.msg-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--sm-text-2); }
.msg-back:hover { background: var(--sm-bg); }

.msg-live { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.msg-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 0.35rem; }
.msg-thread .dq-msg { max-width: min(78%, 640px); }
.msg-thread .dq-msg-body { overflow-wrap: anywhere; }
.msg-thread .dq-day { margin: 0.75rem 0 0.25rem; }
.msg-bubble { margin-top: 0.4rem; }
.msg-bubble.is-cont { margin-top: 0; }
.msg-bubble.is-cont:not(.is-mine) { padding-left: 42px; }
.msg-bubble.is-cont .dq-msg-body { border-radius: 16px; }
.msg-new-divider { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0; color: var(--sm-danger); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.msg-new-divider::before, .msg-new-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--sm-danger-soft); }
.msg-earlier { align-self: center; font-size: 0.8rem; color: var(--sm-muted); padding: 0.25rem 0.75rem; }

.msg-reply { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; padding: 0.7rem 0.9rem; background: var(--sm-surface); border-top: 1px solid var(--sm-border); margin: 0; }
.msg-reply textarea { flex: 1 1 200px; min-height: 40px; max-height: 200px; padding: 0.55rem 0.9rem; border: 1px solid var(--sm-border-strong); border-radius: 20px; resize: none; font-size: 0.933rem; line-height: 1.4; color: var(--sm-text); background: var(--sm-surface); }
.msg-reply textarea:focus { outline: none; border-color: var(--sm-primary); box-shadow: 0 0 0 3px var(--sm-primary-soft); }
.msg-send { height: 40px; min-width: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; }
.msg-reply-hint { flex: 1 0 100%; font-size: 0.8rem; color: var(--sm-faint); padding-left: 0.9rem; }
.msg-readonly { padding: 0.8rem 1rem; background: var(--sm-warning-soft); color: #92400e; font-size: 0.867rem; border-top: 1px solid var(--sm-border); }

.msg-compose { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem; background: var(--sm-surface); }
.msg-compose textarea { resize: vertical; }
.msg-compose-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.msg-compose-foot > div { display: flex; gap: 0.5rem; margin-left: auto; }
.msg-compose-note { margin: 0; font-size: 0.8rem; color: var(--sm-muted); max-width: 520px; }
.msg-opt { display: flex; flex-direction: column; line-height: 1.2; }
.msg-opt-role { font-size: 0.8rem; opacity: 0.7; }

.msg-placeholder, .msg-elsewhere .card-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; text-align: center; color: var(--sm-muted); }
.msg-placeholder > i, .msg-elsewhere .card-body > i { font-size: 2.6rem; color: var(--sm-border-strong); }
.msg-placeholder p { max-width: 360px; margin: 0; }
.msg-elsewhere { max-width: 560px; margin: 2rem auto; }
.msg-elsewhere h2 { font-size: 1.067rem; margin: 0; color: var(--sm-text); }
.msg-elsewhere p { margin: 0; }

@media (max-width: 991.98px) {
    .msg-shell { grid-template-columns: 1fr; height: calc(100vh - 170px); }
    .msg-shell .msg-main { display: none; }
    .msg-shell.is-open .msg-side { display: none; }
    .msg-shell.is-open .msg-main { display: flex; }
    .msg-side { border-right: 0; }
}
@media (max-width: 575.98px) {
    .msg-shell { height: calc(100vh - 140px); border-radius: 10px; }
    .msg-thread .dq-msg { max-width: 90%; }
    .msg-reply-hint { display: none; }
}

/* Chat dock: a launcher in the corner and a panel above it */
.chat-dock { position: fixed; right: 16px; bottom: 16px; z-index: 1040; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.chat-dock > * { pointer-events: auto; }
.chat-launcher { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sm-primary); color: #fff; font-size: 1.067rem; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35), 0 2px 6px rgba(16, 24, 40, 0.12); cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.chat-launcher:hover { background: var(--sm-primary-600); transform: translateY(-1px); }
.chat-launcher:focus-visible { outline: 3px solid var(--sm-primary-200); outline-offset: 3px; }
.chat-dock.is-open .chat-launcher { background: var(--sm-text); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.25); }
.chat-dock.is-open .chat-launcher i::before { content: '\f00d'; }
.chat-badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--sm-danger); color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 3px var(--sm-surface); font-family: var(--sm-font); }
.chat-launcher.is-pulsing { animation: chat-pulse 1.2s ease-out 2; }
@keyframes chat-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55), 0 8px 24px rgba(37, 99, 235, 0.35); }
    100% { box-shadow: 0 0 0 18px rgba(37, 99, 235, 0), 0 8px 24px rgba(37, 99, 235, 0.35); }
}
.chat-panel { width: 370px; height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 16px; box-shadow: 0 18px 48px rgba(16, 24, 40, 0.22); overflow: hidden; transform-origin: bottom right; animation: chat-in 0.16s ease-out; }
.chat-panel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.chat-panel-head { display: flex; align-items: center; gap: 0.25rem; padding: 0.55rem 0.5rem 0.55rem 0.9rem; background: var(--sm-primary); color: #fff; }
.chat-panel-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.933rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-icon-btn { width: 32px; height: 32px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #fff; font-size: 0.9rem; cursor: pointer; }
.chat-icon-btn:hover, .chat-icon-btn:focus-visible { background: rgba(255, 255, 255, 0.18); color: #fff; outline: none; }
.chat-icon-btn[hidden] { display: none; }
.chat-panel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-loading { margin: auto; color: var(--sm-muted); font-size: 0.867rem; }
.chat-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.chat-list .msg-item { padding: 0.6rem 0.85rem; }
.chat-foot { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--sm-border); font-size: 0.867rem; font-weight: 600; }
.chat-empty { margin: auto; padding: 1.5rem; text-align: center; color: var(--sm-muted); font-size: 0.867rem; }
.chat-empty i { font-size: 2.2rem; color: var(--sm-border-strong); display: block; margin-bottom: 0.5rem; }
.chat-thread-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--sm-border); }
.chat-thread-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chat-thread-who strong { font-size: 0.867rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-who span { font-size: 0.8rem; color: var(--sm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-panel .msg-thread { padding: 0.75rem 0.8rem; }
.chat-panel .dq-msg { max-width: 88%; }
.chat-panel .dq-msg-body { font-size: 0.867rem; padding: 0.5rem 0.8rem; }
.chat-panel .dq-avatar { width: 28px; height: 28px; }
.chat-panel .avatar-initials.dq-avatar { font-size: 0.66rem; }
.chat-panel .msg-bubble.is-cont:not(.is-mine) { padding-left: 34px; }
.chat-panel .msg-reply { padding: 0.55rem 0.65rem; flex-wrap: nowrap; }
.chat-panel .msg-reply textarea { min-height: 38px; font-size: 0.867rem; }
.chat-panel .msg-send { height: 38px; min-width: 38px; }

/* Assistant beside Messages in the corner panel (docs/assistant.md) */
.chat-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 0.25rem; }
.chat-tabs[hidden], .chat-panel-title[hidden] { display: none; }
.chat-tab { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; border-radius: 8px; padding: 0.3rem 0.7rem; background: transparent; color: rgba(255, 255, 255, 0.85); font-size: 0.933rem; font-weight: 600; cursor: pointer; }
.chat-tab:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.chat-tab[aria-selected="true"] { background: #fff; color: var(--sm-primary); }
.chat-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chat-tab-count { min-width: 1.25rem; padding: 0 0.3rem; border-radius: 9px; background: var(--sm-danger); color: #fff; font-size: 0.8rem; line-height: 1.25rem; text-align: center; }
.chat-tab-count[hidden] { display: none; }
.chat-assistant { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ca-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ca-msg { max-width: 92%; padding: 0.55rem 0.75rem; border-radius: 12px; font-size: 0.933rem; line-height: 1.45; overflow-wrap: anywhere; }
.ca-msg p { margin: 0 0 0.35rem; }
.ca-msg p:last-child { margin-bottom: 0; }
.ca-bot { align-self: flex-start; background: var(--sm-bg); color: var(--sm-text); }
.ca-me { align-self: flex-end; background: var(--sm-primary); color: #fff; }
.ca-from { font-size: 0.8rem; color: var(--sm-muted); }
.ca-q { display: block; margin-bottom: 0.25rem; font-weight: 600; }
.ca-watch { font-size: 0.867rem; }
.ca-also-head { margin-top: 0.5rem !important; }
.ca-also { margin: 0; padding-left: 1.1rem; font-size: 0.867rem; }
.ca-suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.ca-chip { border: 1px solid var(--sm-border-strong); border-radius: 10px; padding: 0.35rem 0.7rem; background: var(--sm-surface); color: var(--sm-primary); font-size: 0.867rem; text-align: left; cursor: pointer; }
.ca-chip:hover { background: var(--sm-primary-soft); }
.ca-form { display: flex; gap: 0.4rem; padding: 0.6rem 0.7rem 0.35rem; border-top: 1px solid var(--sm-border); }
.ca-form .form-control { font-size: 0.933rem; }
.ca-note { margin: 0; padding: 0 0.8rem 0.6rem; font-size: 0.8rem; color: var(--sm-muted); }
/* The guide is in English: each line takes its own direction, so a question mark stays at the end in Arabic. */
.ca-msg p, .ca-q, .ca-watch, .ca-also li, .ca-chip { unicode-bidi: plaintext; }
.ca-go { margin-top: 0.3rem; }
.ca-go.btn-primary { color: #fff; }
.ca-also .ca-go { display: table; }
/* Maximised: most of the window, still anchored to the launcher's corner. */
.chat-dock.is-max .chat-panel { width: min(960px, calc(100vw - 32px)); height: calc(100vh - 88px); animation: none; }
.chat-dock.is-max .ca-msg { max-width: min(92%, 720px); }
/* The control the guide or the assistant led to (chat.js spot()). */
.guide-spot { outline: 3px solid var(--sm-primary); outline-offset: 4px; animation: guide-spot 1.2s ease-out 2; }
@keyframes guide-spot { from { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); } to { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); } }
.mf-focus .chat-dock { right: 12px; bottom: 12px; }
.mf-focus .chat-launcher { width: 44px; height: 44px; font-size: 1.067rem; }
@media (max-width: 575.98px) {
    .chat-dock { right: 14px; bottom: 14px; }
    .chat-dock.is-open { left: 0; right: 0; top: 0; bottom: 0; gap: 0; }
    .chat-dock.is-open .chat-launcher { display: none; }
    .chat-panel { width: 100vw; height: 100%; max-height: none; border-radius: 0; border: 0; }
    .chat-dock.is-max .chat-panel { width: 100vw; height: 100%; }
    .chat-max-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { .chat-panel, .chat-launcher.is-pulsing, .guide-spot { animation: none; } }
@media print { .chat-dock { display: none !important; } }

/* People: @ autocomplete, picker dialog, chips */
.nav-count[hidden] { display: none !important; }
.mention-menu { position: fixed; z-index: 1060; max-height: 280px; overflow-y: auto; padding: 0.3rem; background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18); }
.mention-menu[hidden] { display: none; }
.mention-item { padding: 0.4rem 0.55rem; border-radius: 8px; cursor: pointer; }
.mention-item[aria-selected="true"], .mention-item:hover { background: var(--sm-primary-soft); }
.mention-empty { padding: 0.6rem; font-size: 0.867rem; color: var(--sm-muted); }
.person-row { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.person-avatar, .avatar-initials.person-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; font-size: 0.7rem; }
.person-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.person-name { font-size: 0.867rem; font-weight: 600; color: var(--sm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-role { font-size: 0.8rem; color: var(--sm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-picker .modal-content { border-radius: 14px; }
.people-picker .modal-body { display: flex; flex-direction: column; gap: 0.6rem; }
.people-search { border-radius: 999px; }
.people-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; margin: 0 -0.5rem; }
.people-item { display: flex; align-items: center; gap: 0.7rem; margin: 0; padding: 0.45rem 0.5rem; border-radius: 8px; cursor: pointer; }
.people-item:hover { background: var(--sm-bg); }
.people-item input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--sm-primary); }
.people-item.is-in { cursor: default; opacity: 0.6; }
.people-count { font-size: 0.867rem; font-weight: 600; color: var(--sm-primary); }
.person-chip { display: inline-flex; align-items: center; gap: 0.2rem; max-width: 100%; padding: 0.1rem 0.2rem 0.1rem 0.6rem; border-radius: 999px; background: var(--sm-primary-soft); color: var(--sm-primary-600); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.person-chip-x { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; line-height: 1; font-size: 1rem; cursor: pointer; }
.person-chip-x:hover, .person-chip-x:focus-visible { background: rgba(37, 99, 235, 0.15); outline: none; }
.msg-tool { flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--sm-border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sm-surface); color: var(--sm-muted); cursor: pointer; }
.msg-tool:hover, .msg-tool:focus-visible { color: var(--sm-primary); border-color: var(--sm-primary); background: var(--sm-primary-soft); outline: none; }
.msg-adding { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.msg-adding[hidden] { display: none; }
.msg-adding-label { font-size: 0.8rem; color: var(--sm-muted); }
.msg-mention { font-weight: 600; color: var(--sm-primary-600); background: var(--sm-primary-soft); border-radius: 4px; padding: 0 0.15rem; }
.dq-msg.is-mine .msg-mention { color: #fff; background: rgba(255, 255, 255, 0.2); }
.msg-event { margin: 0.4rem 0; }
.msg-event i { color: var(--sm-primary); }
.msg-to-label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.msg-to-label label { margin-bottom: 0.3rem; }
.msg-to-label .btn-link { padding: 0; font-size: 0.8rem; }
.chat-panel .msg-tool { width: 38px; height: 38px; }

/* The panel's own composer */
.chat-compose { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; margin: 0; }
.chat-compose-to { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--sm-border); }
.chat-compose-label { font-size: 0.8rem; font-weight: 600; color: var(--sm-muted); }
.chat-compose-chips { display: contents; }
.chat-compose-find { flex: 1 1 90px; min-width: 90px; border: 0; padding: 0.25rem 0; font-size: 0.867rem; background: transparent; color: var(--sm-text); }
.chat-compose-find:focus, .chat-compose-subject:focus, .chat-compose-body:focus { outline: none; }
.chat-compose-subject { border: 0; border-bottom: 1px solid var(--sm-border); padding: 0.55rem 0.8rem; font-size: 0.867rem; color: var(--sm-text); }
.chat-compose-body { flex: 1 1 auto; min-height: 120px; border: 0; padding: 0.7rem 0.8rem; resize: none; font-size: 0.933rem; line-height: 1.45; color: var(--sm-text); }
.chat-compose-send { align-self: flex-end; margin: 0.55rem 0.7rem; border-radius: 999px; }
.chat-compose-to:focus-within, .chat-compose-subject:focus, .chat-compose-body:focus { background: #fbfcff; }

/* ---- My settings: message notifications */
#notifications .notify-row { min-height: 2rem; }
#notifications .notify-channel { border-top: 1px solid var(--border-color, #e9ecef); padding: .6rem 0 .5rem; margin: 0; }
#notifications .notify-channel:first-of-type { border-top: 0; }
#notifications .notify-detail { margin: .25rem 0 0 2.25rem; }
#notifications .notify-other { display: none; max-width: 16rem; margin-top: .35rem; }
#notifications .notify-channel:has(input[name$="[same_as_phone]"][value="0"]:checked) .notify-other { display: block; }
#notifications .notify-channel:has(input[name$="[enabled]"][type="checkbox"]:not(:checked)) .notify-detail { opacity: .6; }
#notifications .notify-icon-whatsapp { color: #25d366; }
#notifications .notify-icon-viber { color: #7360f2; }
#notifications .notify-icon-sms { color: #6c757d; }
@media (max-width: 575.98px) {
    #notifications .notify-detail { margin-left: 0; }
    #notifications .notify-detail .custom-control-inline { display: flex; margin-right: 0; }
    #notifications .notify-other { max-width: none; }
}
#notifications .notify-detail .custom-control-label { font-weight: 400; }
.profile-facts .fact-value-sm { font-size: 0.933rem; }
.profile-hero-text { min-width: 0; }
@media (max-width: 575.98px) {
    .profile-hero .profile-facts { margin-left: 0; width: 100%; }
}
.signin-list { list-style: none; margin: 0; padding: 0; }
.signin-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.25rem; border-top: 1px solid var(--sm-border); font-size: 0.867rem; }
.signin-list li:first-child { border-top: 0; }
.signin-list time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sm-text); }
.signin-list .signin-ip { margin-left: auto; color: var(--sm-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Query page: read-only form preview */
.dq-pv-sub { font-size: 0.8rem; color: var(--sm-muted); margin-top: 0.15rem; }
.dq-pv { background: var(--sm-bg); }
.dq-pv-group { background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 10px; padding: 0.6rem 0.9rem; margin-bottom: 0.9rem; }
.dq-pv-group h6 { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sm-faint); margin: 0.2rem 0 0.4rem; }
.dq-pv-field { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.2rem 0.9rem; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--sm-border); align-items: baseline; }
.dq-pv-group .dq-pv-field:last-child { border-bottom: 0; }
.dq-pv-label { color: var(--sm-muted); font-size: 0.867rem; overflow-wrap: anywhere; }
.dq-pv-value { font-weight: 600; overflow-wrap: anywhere; }
.dq-pv-value .val.is-empty { color: var(--sm-faint); font-weight: 400; font-style: italic; }
.dq-pv-field.is-queried { background: var(--sm-danger-soft, #fef2f2); border-left: 3px solid var(--sm-danger); border-radius: 6px; }
@media (max-width: 575.98px) { .dq-pv-field { grid-template-columns: 1fr; } }

/* Query page: correct the queried value with the answer */
.dq-correct { border: 1px dashed var(--sm-border-strong); border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; background: var(--sm-bg); }
.dq-correct-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sm-text-2); margin-bottom: 0.35rem; }
.dq-correct-input { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dq-correct-input .form-control { flex: 1 1 12rem; max-width: 22rem; }
.dq-correct-affix { color: var(--sm-muted); font-size: 0.867rem; }
.dq-correct.is-locked { border-style: solid; font-size: 0.867rem; color: var(--sm-muted); }

/* Document vault */
.vault-kpi-danger { background: var(--sm-danger-soft); color: var(--sm-danger); }
.vault-slots .vault-category { min-width: 16rem; max-width: 26rem; }
.vault-slots .vault-category .badge { margin-top: .25rem; }
.vault-slot-missing td:first-child { box-shadow: inset 3px 0 0 var(--sm-danger); }
.vault-slot-expired td:first-child { box-shadow: inset 3px 0 0 var(--sm-danger); }
.vault-slot-expiring td:first-child { box-shadow: inset 3px 0 0 var(--sm-warning); }
.vault-docs li + li { margin-top: .6rem; }
.vault-doc { display: flex; align-items: flex-start; gap: .6rem; }
.vault-doc-text { min-width: 0; }
.vault-thumb { flex: 0 0 auto; display: block; width: 44px; line-height: 0; border: 1px solid var(--sm-border); border-radius: 3px; overflow: hidden; background: #fff; }
.vault-thumb img { display: block; width: 100%; height: auto; }
.vault-thumb:hover, .vault-thumb:focus { border-color: var(--sm-muted); }
.vault-thumb-large { width: 150px; }
.vault-preview { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.vault-preview .vault-details { flex: 1 1 15rem; min-width: 0; }
.vault-docs .vault-open { margin-left: .35rem; font-size: .8rem; }
.vault-details { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
.vault-details dt { font-weight: 500; color: var(--sm-muted); }
.vault-details dd { margin: 0; }
.vault-fold > summary { cursor: pointer; list-style: none; }
.vault-fold > summary::-webkit-details-marker { display: none; }
.vault-fold > summary .card-title::before { content: "\25B8"; display: inline-block; margin-right: .5rem; transition: transform .15s; }
.vault-fold[open] > summary .card-title::before { transform: rotate(90deg); }

/* Questions shown as toasts (SMHERP.ask in assets/js/app.js) */
#toast-container > .smherp-ask { opacity: 1; cursor: default; }
.smherp-ask-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

/* Vault: stat cards filter the slots; withdrawn note with its action */
a.vault-kpi-link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.vault-kpi-link:hover, a.vault-kpi-link:focus-visible { border-color: var(--sm-primary-200); box-shadow: var(--sm-shadow-md); }
a.vault-kpi-link.active { border-color: var(--sm-primary); box-shadow: 0 0 0 2px var(--sm-primary-soft); }
.vault-file .vault-filter-note { margin-left: auto; align-self: center; }
.vault-new-version { font-size: .8rem; }
.vault-withdrawn-note { gap: .5rem; }
.vault-gaps { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .75rem 1rem; margin-bottom: 1.25rem; border: 1px solid var(--sm-border); border-left: 3px solid var(--sm-danger); border-radius: var(--sm-radius-sm); background: var(--sm-surface); }
.vault-gaps.vault-gaps-ok { border-left-color: var(--sm-success); }
.vault-gaps .vault-gaps-lead { font-weight: 600; }
.custom-file-label.selected { color: var(--sm-text); }

/* Subject toolbar: named buttons, the rest under More */
.mf-toolbar .mf-tools { flex-wrap: wrap; }
.mf-more .dropdown-menu { min-width: 15rem; }
.mf-more .dropdown-item { white-space: normal; }
.mf-more .dropdown-item .small { line-height: 1.2; }

/* Subject cards overview: compact cards, grouped by kind of form */
.subject-cards-group { margin-bottom: 1rem; }
.subject-cards-group > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .25rem 0 .6rem; }
.subject-cards-group > summary::-webkit-details-marker { display: none; }
.subject-cards-group > summary::before { content: "\25B8"; color: var(--sm-muted); transition: transform .15s; display: inline-block; }
.subject-cards-group[open] > summary::before { transform: rotate(90deg); }
.subject-cards-group > summary:focus-visible { outline: 2px solid var(--sm-primary); outline-offset: 2px; border-radius: 4px; }
.subject-cards-title { font-size: 1rem; font-weight: 600; color: var(--sm-text); }
.subject-cards-count { color: var(--sm-muted); font-weight: 500; }
.subject-cards-hint { font-size: .8rem; color: var(--sm-muted); }
.subject-card { border: 1px solid var(--sm-card-border); border-radius: var(--sm-radius); color: inherit; text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
.subject-card:hover, .subject-card:focus-visible { border-color: var(--sm-primary-200); box-shadow: var(--sm-shadow-md); color: inherit; text-decoration: none; }
.subject-card:focus-visible { outline: 2px solid var(--sm-primary); outline-offset: 2px; }
.subject-card .card-body { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem; }
.subject-card-title { font-weight: 600; font-size: 0.933rem; line-height: 1.3; color: var(--sm-text); }
.subject-card-desc { font-size: 0.8rem; color: var(--sm-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subject-card-facts { margin: 0; display: grid; gap: .4rem; }
.subject-card-facts > div:not(.subject-card-bar) { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; }
.subject-card-facts dt { font-weight: 400; color: var(--sm-text-2); }
.subject-card-facts dd { margin: 0; font-weight: 600; text-align: right; display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; }
.subject-card-facts .tabular { font-variant-numeric: tabular-nums; }
.subject-card-bar { height: 6px; border-radius: 999px; background: var(--sm-bg); border: 1px solid var(--sm-border); overflow: hidden; }
.subject-card-bar > span { display: block; height: 100%; background: var(--sm-primary); border-radius: 999px; }
.subject-card-bar > span.is-full { background: var(--sm-success); }
.subject-card-open { margin-top: auto; padding-top: .25rem; font-size: 0.867rem; font-weight: 600; color: var(--sm-primary); }
.subject-card-open .fa-chevron-right { font-size: .7rem; }
tr.row-unsaved > td:first-child { box-shadow: inset 3px 0 0 var(--sm-warning); }
tr.row-unsaved select { border-color: var(--sm-warning); }
.subject-pill.badge-secondary { background: #475569; }
.subject-pill .subject-pill-icon { font-size: .72rem; margin-right: .35rem; opacity: .9; }

/* The chat launcher keeps clear of the last row and the footer */
.content-wrapper > .content { padding-bottom: 72px; }
.main-footer { padding-right: 96px; }

/* DataTables: loading shows as a thin bar on top of the table, not a box over it */
div.dataTables_wrapper { position: relative; }
div.dataTables_wrapper div.dataTables_processing {
    position: absolute; top: 0; left: 0; right: 0; width: auto; height: 3px; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: linear-gradient(90deg, transparent 0%, var(--sm-primary) 50%, transparent 100%); background-size: 50% 100%; background-repeat: no-repeat;
    box-shadow: none; font-size: 0; color: transparent; overflow: hidden; z-index: 3; animation: dt-loading 1.1s linear infinite;
}
div.dataTables_wrapper div.dataTables_processing > div { display: none; }
@keyframes dt-loading { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { div.dataTables_wrapper div.dataTables_processing { animation: none; background: var(--sm-primary); } }
@media (max-width: 991.98px) { body:has(.mf-mobile-bar) .chat-dock { bottom: 84px; } }

/* Study finance: contract figures, fee schedule, hospital accounts board */
.tabular { font-variant-numeric: tabular-nums; }
.text-warning-strong { color: #92400e; }
.kpi .kpi-bar { display: block; height: 4px; margin-top: .4rem; border-radius: 999px; background: var(--sm-bg); overflow: hidden; }
.kpi .kpi-bar > span, .fin-progress > span { display: block; height: 100%; background: var(--sm-success); border-radius: inherit; }
.fin-progress { height: 3px; margin-top: .3rem; margin-left: auto; width: 6rem; border-radius: 999px; background: var(--sm-bg); overflow: hidden; }
.fin-fold > summary { border-top: 1px solid var(--sm-border); }
.fin-fees tfoot th { border-top: 2px solid var(--sm-border); font-weight: 600; }
.fin-inline-form { border-top: 1px solid var(--sm-border); }
.fin-inline-form .form-group { margin-bottom: .5rem; }
.fin-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.fin-bucket { display: flex; flex-direction: column; gap: .6rem; padding: .85rem; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); background: var(--sm-surface); transition: border-color .12s, box-shadow .12s; }
.fin-bucket-shared { background: var(--sm-bg); border-style: dashed; }
.fin-board-dragging .fin-bucket { border-style: dashed; }
.fin-bucket-over { border-color: var(--sm-primary); box-shadow: 0 0 0 3px var(--sm-primary-soft); }
.fin-bucket-name { font-weight: 600; color: var(--sm-text); }
.fin-bucket-meta { font-size: 0.8rem; color: var(--sm-muted); }
.fin-code { font-size: 0.8rem; font-weight: 500; color: var(--sm-text-2); background: var(--sm-bg); border: 1px solid var(--sm-border); border-radius: 4px; padding: 0 .3rem; margin-left: .25rem; }
.fin-chips { display: flex; flex-direction: column; gap: .4rem; min-height: 2.5rem; }
.fin-chip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .15rem .5rem; padding: .45rem .55rem; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); background: var(--sm-surface); font-size: 0.867rem; }
.fin-chip[draggable="true"] { cursor: grab; }
.fin-chip:not([draggable="true"]) { grid-template-columns: 1fr auto; }
.fin-chip-dragging { opacity: .45; }
.fin-chip-saving { opacity: .6; pointer-events: none; }
.fin-grip { color: var(--sm-faint); }
.fin-chip-label { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.fin-chip-amount { font-weight: 600; white-space: nowrap; }
.fin-chip-move { grid-column: 1 / -1; font-size: 0.8rem; height: auto; padding-top: .1rem; padding-bottom: .1rem; }
.fin-figs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; margin: 0; padding-top: .5rem; border-top: 1px solid var(--sm-border); font-size: .8rem; }
.fin-figs dt { font-weight: 500; color: var(--sm-muted); }
.fin-figs dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-figs .fin-balance dd { color: var(--sm-text); }
.fin-account-edit > summary { cursor: pointer; color: var(--sm-muted); }
.fin-account-edit form { margin-top: .4rem; }

/* Staff records and delegation logs */
.person-avatar { width: 56px; height: 56px; font-size: 1.2rem; }
.person-checks { display: flex; flex-wrap: wrap; gap: .4rem; }
.person-checks .badge { font-size: 0.8rem; padding: .35rem .6rem; }
.person-details { grid-template-columns: minmax(10rem, max-content) 1fr; }
.team-checks { display: flex; gap: .35rem; }
.team-check { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; font-size: 0.8rem; }
.team-check-ok { background: var(--sm-success-soft); color: var(--sm-success); }
.team-check-warn { background: var(--sm-warning-soft); color: #92400e; }
.team-check-bad { background: var(--sm-danger-soft, #fde8e8); color: var(--sm-danger); }
.team-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .3rem 1rem; }
.team-log td { vertical-align: top; }

/* Delegation log: the site's print button and its signed copy */
.team-site-actions { display: inline-flex; gap: .35rem; }
.team-signed { border-top: 1px solid var(--sm-border, #e4e7ec); }

/* Language switcher in the top bar */
.language-toggle::after { display: none; }
.language-code { font-size: 0.8rem; font-weight: 600; margin-left: .25rem; }
.language-menu .dropdown-menu { min-width: 9rem; }

/* Longer labels in other languages must wrap on a phone, not push the page sideways. */
@media (max-width: 991.98px) {
    .card-header > .d-flex.align-items-center { flex-wrap: wrap; row-gap: .375rem; }
    .fr-wrap { flex-wrap: wrap; row-gap: .375rem; }
    .form-check-inline { max-width: 100%; }
    .form-check-inline .form-check-label { max-width: 100%; white-space: normal; }
}

/* A long table scrolls inside its own column instead of widening the page. */
.dataTables_wrapper > .row > .col-sm-12 { overflow-x: auto; }

/* German column headings are long: wrapping them keeps the row actions on screen. */
:lang(de) .table-responsive > .table > thead > tr > th { white-space: normal; }
:lang(de) .study-card-bars,
:lang(ar) .study-card-bars { grid-template-columns: max-content minmax(3rem, 1fr) minmax(0, max-content); }
:lang(de) .study-card-bars .bar-value,
:lang(ar) .study-card-bars .bar-value { white-space: normal; }
:lang(de) .study-card-hero .sparkline { flex: 1 1 0; width: 0; min-width: 0; }
:lang(de) .study-card-hero .hero-pulse { flex: 0 0 7.25rem; }
:lang(de) .kpi .kpi-label-clip,
:lang(ar) .kpi .kpi-label-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }

/* The hidden checkbox stays inside the box that scrolls the permission matrix. */
.perm-toggle { position: relative; }

/* Room under the last row, so the floating message button never covers it. */
.content-wrapper > .content { padding-bottom: 4.5rem; }

/* Online guide: one question and its film to a page */
.guide { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); padding-top: .75rem; }
.guide-nav { background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: var(--sm-radius); display: flex; flex-direction: column; min-height: 0; order: 2; padding: .75rem; }
.guide-list { flex: 1 1 auto; margin-top: .5rem; min-height: 0; overflow-y: auto; }
.guide-chapter h2 { color: var(--sm-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: .04em; margin: .75rem 0 .25rem; text-transform: uppercase; }
.guide-chapter ul { list-style: none; margin: 0; padding: 0; }
.guide-chapter a { border-radius: 6px; color: inherit; display: block; font-size: 0.867rem; line-height: 1.3; padding: .3rem .5rem; }
.guide-chapter a:hover { background: var(--sm-card-head); text-decoration: none; }
.guide-chapter a.is-current { background: var(--sm-primary-soft); color: var(--sm-primary); font-weight: 600; }
.guide-chapter li[hidden], .guide-chapter[hidden], .guide-none[hidden] { display: none; }
.guide-none { color: var(--sm-muted); font-size: 0.867rem; margin: .75rem .5rem; }
.guide-scope { border-top: 1px solid var(--sm-border); display: block; font-size: .8rem; margin-top: .5rem; padding-top: .5rem; }
.guide-answer { background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: var(--sm-radius); min-width: 0; order: 1; padding: 1rem 1.25rem; }
.guide-kicker { color: var(--sm-muted); font-size: 0.8rem; margin: 0 0 .1rem; }
.guide-answer h1 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 .35rem; }
.guide-lead { font-size: 0.933rem; margin: 0 0 .65rem; }
.guide-film { margin: 0 0 .65rem; position: relative; }
.guide-film img { background: var(--sm-card-head); border: 1px solid var(--sm-border); border-radius: 8px; display: block; height: auto; margin: 0 auto; max-width: 100%; }
.guide-film .btn { inset-inline-end: .5rem; opacity: .92; position: absolute; top: .5rem; }
.guide-steps { font-size: 0.867rem; margin: 0 0 .5rem; padding-inline-start: 1.25rem; }
.guide-steps li { margin-bottom: .15rem; }
.guide-note { background: var(--sm-card-head); border-radius: 6px; font-size: 0.867rem; margin: 0 0 .5rem; padding: .4rem .6rem; }
.guide-who { color: var(--sm-muted); font-size: 0.867rem; margin: 0 0 .6rem; }
.guide-foot { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }

@media (min-width: 992px) {
    .content-wrapper > .content:has(.guide) { padding-bottom: .75rem !important; }
    .guide { grid-template-columns: 19rem minmax(0, 1fr); height: calc(100vh - 8rem); }
    .guide-nav { order: 0; }
    .guide-answer { order: 0; overflow-y: auto; }
    .guide-film img { max-height: calc(100vh - 24.5rem); width: auto; }
}

@media print {
    .guide { display: block; height: auto; }
    .guide-nav, .guide-foot, .guide-film .btn { display: none; }
}

/* Management dashboard */
.mgmt-section { scroll-margin-top: 4.5rem; }
.mgmt-bar-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-bottom: 1rem; }
.mgmt-page > .mgmt-bar-top { align-items: flex-end; gap: .5rem .75rem; margin-bottom: .75rem; padding-top: .75rem; border-bottom: 1px solid var(--sm-border); }
.mgmt-page > .mgmt-bar-top > :not(.mgmt-tabs) { margin-bottom: .45rem; }
.mgmt-tabs { flex: 1 1 auto; margin-bottom: -1px; border-bottom: 0; }
.mgmt-tabs .nav-link { padding: .55rem .8rem; white-space: nowrap; }
.mgmt-views { display: flex; flex: none; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .6rem; font-size: .85rem; }
.mgmt-view-links { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.mgmt-view-links a { padding-bottom: .1rem; border-bottom: 2px solid transparent; color: var(--sm-text-2); }
.mgmt-view-links a:hover { color: var(--sm-text); text-decoration: none; }
.mgmt-view-links a.active { border-bottom-color: var(--sm-text); color: var(--sm-text); font-weight: 600; }
.mgmt-views small { margin-inline-start: auto; color: var(--sm-text-2); }
.mgmt-table { overflow: auto; }
.mgmt-table-title { margin: 0; padding: .7rem 1rem .4rem; font-size: .92rem; font-weight: 600; }
.mgmt-foot { flex: none; margin: .75rem 0 0; }
.mgmt-foot .mgmt-forms { border-top: 0; }
.mgmt-printing .mgmt-tab[hidden], .mgmt-printing .mgmt-view[hidden] { display: block !important; }
/* From this width each tab is sized to the window: panels share its height,
   charts and diagrams fill their panel, and a long table scrolls inside it. */
@media (min-width: 992px) {
    .content-wrapper > .content:has(.mgmt-tabs-on) { padding-bottom: .75rem !important; }
    .mgmt-tabs-on .mgmt-tab { display: flex; flex-direction: column; height: var(--mgmt-fit, auto); }
    .mgmt-tabs-on .mgmt-view { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; }
    .mgmt-tabs-on .mgmt-strip { flex: none; margin-bottom: .75rem; }
    .mgmt-tabs-on .mgmt-grid { flex: 1 1 0; grid-auto-rows: minmax(0, 1fr); gap: .75rem; min-height: 0; margin-bottom: 0; }
    .mgmt-tabs-on .mgmt-panel { min-height: 0; overflow: hidden; }
    .mgmt-tabs-on .mgmt-panel-body { min-height: 0; overflow: auto; }
    .mgmt-tabs-on .mgmt-panel .mgmt-chart { flex: 1 1 0; min-height: 0; }
    .mgmt-tabs-on .mgmt-svg-box { flex: 1 1 0; min-height: 0; overflow: auto; }
    .mgmt-tabs-on .mgmt-svg { height: 100%; min-width: 0 !important; min-height: calc(var(--mgmt-svg-h) * .6); }
    .mgmt-tabs-on .mgmt-svg-box:has(+ .mgmt-gantt-key) { flex: 0 1 auto; }
    .mgmt-tabs-on .mgmt-svg-box:has(+ .mgmt-gantt-key) .mgmt-svg { height: auto; }
    .mgmt-tabs-on .mgmt-panel:has(> .mgmt-panel-body > .mgmt-twin[open]) .mgmt-chart { display: none; }
    .mgmt-tabs-on .mgmt-twin[open] { flex: 1 1 0; min-height: 0; overflow: auto; }
    .mgmt-tabs-on #attention .mgmt-twin[open] { flex: none; overflow: visible; }
    .mgmt-tabs-on .mgmt-overview.has-side #attention { grid-column: 9 / span 4; grid-row: 1 / span 2; }
    .mgmt-tabs-on .mgmt-table { flex: 0 1 auto; min-height: 0; margin-bottom: 0; }
    .mgmt-tabs-on .mgmt-overview .mgmt-bullet { padding-block: .2rem; }
}
.mgmt-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.mgmt-picker-item { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.mgmt-picker select { width: auto; max-width: 16rem; }
.mgmt-jump { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .85rem; }
.mgmt-topic + .mgmt-topic { border-top: 1px solid var(--sm-border); }
.mgmt-topic > summary { cursor: pointer; padding: .45rem 0; font-weight: 600; }
.mgmt-items { list-style: none; margin: 0 0 .5rem; padding: 0; }
.mgmt-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .2rem 0; font-size: .9rem; }
.mgmt-items li > a { white-space: nowrap; }
.mgmt-meter { position: relative; width: 7rem; height: .5rem; border-radius: 2px; background: var(--sm-bg); box-shadow: inset 0 0 0 1px var(--sm-border); }
.mgmt-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--sm-primary); }
.mgmt-meter > i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--sm-text); }
.mgmt-total th { border-top: 2px solid var(--sm-border); font-weight: 600; }
.mgmt-fold { border-top: 1px solid var(--sm-border); }
.mgmt-fold > summary { cursor: pointer; padding: .6rem 1rem; font-weight: 600; font-size: .9rem; }
.mgmt-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem 1.25rem; margin: 0; }
.mgmt-facts dt { font-weight: 400; font-size: .78rem; color: var(--sm-muted); }
.mgmt-facts dd { margin: 0; font-weight: 600; }
.mgmt-flow-cell { min-width: 10rem; vertical-align: middle; }
.mgmt-flow { display: flex; gap: 2px; height: .6rem; }
.mgmt-flow > span { min-width: 3px; border-radius: 2px; }
.mgmt-legend { display: flex; flex-wrap: wrap; gap: .25rem .85rem; font-size: .78rem; color: var(--sm-muted); }
.mgmt-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.mgmt-legend i { width: .65rem; height: .65rem; border-radius: 2px; }
.mgmt-flow .is-done, .mgmt-legend .is-done { background: var(--sm-success); }
.mgmt-flow .is-due, .mgmt-legend .is-due { background: var(--sm-primary); }
.mgmt-flow .is-overdue, .mgmt-legend .is-overdue { background: var(--sm-danger); }
.mgmt-flow .is-planned, .mgmt-legend .is-planned { background: var(--sm-border-strong); }
.mgmt-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem 2rem; border-top: 1px solid var(--sm-border); }
.mgmt-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: 0; }
.mgmt-form .form-group { flex: 1 1 9rem; margin: 0; }
.mgmt-form .form-group.mgmt-narrow { flex: 0 0 5rem; }
.mgmt-hash { word-break: break-all; color: inherit; }
.mgmt-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.mgmt-buttons form { margin: 0; }
.mgmt-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.mgmt-grid > * { min-width: 0; margin-bottom: 0; }
.mgmt-span-3 { grid-column: span 3; }
.mgmt-span-4 { grid-column: span 4; }
.mgmt-span-5 { grid-column: span 5; }
.mgmt-span-6 { grid-column: span 6; }
.mgmt-span-7 { grid-column: span 7; }
.mgmt-span-8 { grid-column: span 8; }
.mgmt-span-12 { grid-column: span 12; }
.mgmt-heading { margin: 1.75rem 0 .75rem; font-size: 1.05rem; font-weight: 600; scroll-margin-top: 4.5rem; }
.mgmt-heading small { margin-inline-start: .5rem; font-size: .78rem; font-weight: 400; color: var(--sm-muted); }
.mgmt-panel { display: flex; flex-direction: column; }
.mgmt-shelves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1.25rem 2rem; }
.mgmt-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.mgmt-shelf-group { min-width: 0; }
.mgmt-shelf-name { margin: 0 0 .5rem; font-size: .85rem; font-weight: 600; }
.mgmt-shelf-item { min-width: 0; font-size: .78rem; }
.mgmt-shelf-item a { display: block; color: inherit; text-decoration: none; }
.mgmt-shelf-page { display: block; width: 100%; height: auto; aspect-ratio: 240 / 339; border: 1px solid var(--sm-border); border-radius: 3px; background: #fff; }
.mgmt-shelf-item a:hover .mgmt-shelf-page, .mgmt-shelf-item a:focus .mgmt-shelf-page { border-color: var(--sm-muted); }
.mgmt-shelf-empty { border-style: dashed; background: transparent; }
.mgmt-shelf-label { display: block; margin-top: .35rem; font-weight: 600; }
.mgmt-shelf-text { display: block; color: var(--sm-muted); overflow-wrap: anywhere; }
.mgmt-shelf-item.is-missing .mgmt-shelf-text, .mgmt-shelf-item.is-expired .mgmt-shelf-text { color: var(--sm-danger); }
.mgmt-shelf-item.is-expiring .mgmt-shelf-text { color: var(--sm-warning); }
@media (max-width: 480px) { .mgmt-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mgmt-panel-head { padding: .75rem 1rem 0; }
.mgmt-panel-head h4 { margin: 0; font-size: .92rem; font-weight: 600; }
.mgmt-panel-head p { margin: .15rem 0 0; font-size: .78rem; color: var(--sm-muted); }
.mgmt-panel-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: .6rem 1rem .75rem; }
.mgmt-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin-bottom: 1rem; background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 8px; }
.mgmt-strip > div { padding: .7rem 1rem; border-inline-start: 1px solid var(--sm-border); margin-inline-start: -1px; }
.mgmt-strip dt { font-weight: 400; font-size: .78rem; color: var(--sm-muted); }
.mgmt-strip dd { margin: .1rem 0 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.mgmt-strip small { display: block; font-size: .75rem; color: var(--sm-muted); }
.mgmt-chart { position: relative; flex: 1 1 auto; width: 100%; }
.mgmt-chart canvas { position: absolute; inset: 0; }
.mgmt-chart.is-sm { min-height: 9rem; }
.mgmt-chart.is-md { min-height: 16rem; }
.mgmt-chart.is-lg { min-height: 21rem; }
.mgmt-twin { margin-top: .4rem; font-size: .8rem; }
.mgmt-twin > summary { cursor: pointer; color: var(--sm-muted); }
.mgmt-twin table { margin-top: .35rem; }
.mgmt-svg-box { flex: 1 1 auto; overflow-x: auto; }
/*rtl:ignore*/
.mgmt-svg { display: block; width: 100%; height: auto; direction: ltr; font-size: 12px; }
.mgmt-svg text { paint-order: stroke; stroke: var(--sm-surface); stroke-width: 3px; stroke-linejoin: round; }
.mgmt-svg-label { fill: var(--sm-text); font-weight: 600; }
.mgmt-svg-value { fill: var(--sm-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.mgmt-svg-tick { fill: var(--sm-muted); font-size: 11px; }
.mgmt-svg-grid { stroke: var(--sm-border); stroke-width: 1; }
.mgmt-svg-row { stroke: var(--sm-border-strong); stroke-width: 1; }
.mgmt-svg-today { stroke: var(--sm-danger); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mgmt-svg-today-label { fill: var(--sm-danger); font-size: 11px; font-weight: 600; }
.mgmt-ribbon { opacity: .22; }
.mgmt-ribbon:hover { opacity: .45; }
.mgmt-svg-bar.is-startup { fill: #7dadf8; }
.mgmt-svg-bar.is-accrual { fill: #1e3a8a; opacity: .75; }
.mgmt-mark circle { fill: var(--sm-success); stroke: var(--sm-surface); stroke-width: 2; }
.mgmt-mark text { fill: #fff; stroke: none; font-size: 10px; font-weight: 700; text-anchor: middle; }
.mgmt-mark.is-expiring circle { fill: var(--sm-warning); }
.mgmt-mark.is-expired circle { fill: var(--sm-danger); }
.mgmt-mark.is-recorded circle { fill: var(--sm-surface); stroke: var(--sm-primary); stroke-width: 1.5; }
.mgmt-mark.is-recorded text { fill: var(--sm-primary); }
.mgmt-mark.is-patient circle { fill: var(--sm-text); }
.mgmt-mark.is-plain circle { fill: var(--sm-muted); }
.mgmt-gantt-key { margin-top: .6rem; }
.mgmt-key { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sm-success); color: #fff; font-size: .62rem; font-weight: 700; }
.mgmt-key.is-patient { background: var(--sm-text); }
.mgmt-key.is-plain { background: var(--sm-muted); }
.mgmt-key.is-expiring { background: var(--sm-warning); }
.mgmt-key.is-expired { background: var(--sm-danger); }
.mgmt-key.is-recorded { background: var(--sm-surface); box-shadow: inset 0 0 0 1.5px var(--sm-primary); }
.mgmt-legend i.mgmt-key-bar { width: 1.1rem; height: .5rem; }
.mgmt-key-bar.is-startup { background: #7dadf8; }
.mgmt-key-bar.is-accrual { background: #1e3a8a; opacity: .75; }
.vc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .75rem; }
.vc-nav { display: flex; align-items: center; gap: .4rem; }
.vc-title { min-width: 10rem; font-size: 1.067rem; font-weight: 600; text-align: center; }
.vc-filter { max-width: 16rem; }
.vc-legend { display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }
.vc-legend .vc-chip { margin: 0; gap: .4rem; }
.vc-chip { display: flex; justify-content: space-between; gap: .25rem; margin-bottom: .15rem; padding: .08rem .3rem; border-radius: 3px; font-size: 0.8rem; line-height: 1.35; }
.vc-chip:hover { text-decoration: none; filter: brightness(.96); }
.vc-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-more { font-size: 0.8rem; color: var(--sm-muted); }
.visit-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.visit-cal th { padding: .35rem .5rem; border: 1px solid var(--sm-border); border-left: 0; border-right: 0; font-size: 0.8rem; font-weight: 600; color: var(--sm-muted); }
.visit-cal td { height: 6.5rem; padding: .25rem .3rem; border: 1px solid var(--sm-border); vertical-align: top; }
.visit-cal td:first-child { border-left: 0; }
.visit-cal td:last-child { border-right: 0; }
.visit-cal td.is-weekend { background: var(--sm-bg); }
.visit-cal td.is-out { background: var(--sm-bg); opacity: .6; }
.visit-cal td.is-selected { box-shadow: inset 0 0 0 2px var(--sm-primary); }
.vc-day { display: block; margin-bottom: .15rem; font-size: 0.8rem; font-weight: 600; color: var(--sm-text); }
.vc-day:hover { text-decoration: none; color: var(--sm-primary); }
.vc-day-long { display: none; }
.is-today .vc-day-n { display: inline-block; min-width: 1.35rem; border-radius: 50%; background: var(--sm-primary); color: #fff; line-height: 1.35rem; text-align: center; }
@media (max-width: 767.98px) {
    .vc-legend { margin-left: 0; }
    .visit-cal, .visit-cal tbody, .visit-cal tr, .visit-cal td { display: block; width: 100%; }
    .visit-cal thead, .visit-cal td.is-empty, .visit-cal td.is-out { display: none; }
    .visit-cal td { height: auto; padding: .5rem .75rem; border-left: 0; border-right: 0; }
    .vc-day-long { display: inline; }
    .vc-chip { padding: .25rem .4rem; font-size: .8rem; }
}
.mgmt-gauge-track { fill: var(--sm-border); }
.mgmt-gauge-fill { fill: var(--sm-primary); }
.mgmt-gauge text { fill: var(--sm-muted); stroke: none; font-size: 9.5px; font-weight: 600; }
.mgmt-flag line { stroke: var(--sm-text); stroke-width: 1.5; }
.mgmt-flag polygon { fill: var(--sm-surface); stroke: var(--sm-text); stroke-width: 1; stroke-linejoin: round; }
.mgmt-flag text { fill: var(--sm-text); stroke: none; font-size: 9px; font-weight: 700; text-anchor: middle; }
.mgmt-flag.is-behind line, .mgmt-flag.is-past_end line { stroke: var(--sm-danger); }
.mgmt-flag.is-behind polygon, .mgmt-flag.is-past_end polygon { fill: var(--sm-danger); stroke: var(--sm-danger); }
.mgmt-flag.is-behind text, .mgmt-flag.is-past_end text { fill: #fff; }
.mgmt-flag.is-reached line { stroke: var(--sm-success); }
.mgmt-flag.is-reached polygon { fill: var(--sm-success); stroke: var(--sm-success); }
.mgmt-flag.is-reached text { fill: #fff; }
.mgmt-legend i.mgmt-key-flag { position: relative; width: .95rem; height: .7rem; border-radius: 0; border-left: 1.5px solid var(--sm-text); }
.mgmt-legend i.mgmt-key-flag::after { content: ""; position: absolute; left: 0; top: 0; width: .85rem; height: .45rem; background: var(--sm-danger); clip-path: polygon(0 0, 100% 0, 75% 50%, 100% 100%, 0 100%); }
.mgmt-bullet { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(6rem, 1fr) 6.5rem minmax(6rem, 10rem); align-items: center; gap: .75rem; padding: .32rem 0; font-size: .875rem; }
.mgmt-bullet + .mgmt-bullet { border-top: 1px solid var(--sm-border); }
.mgmt-bullet-bar { position: relative; height: .7rem; border-radius: 2px; background: var(--sm-bg); box-shadow: inset 0 0 0 1px var(--sm-border); }
.mgmt-bullet-bar.is-none { background: none; box-shadow: none; }
.mgmt-bullet-fill { display: block; height: 100%; border-radius: 2px; background: var(--sm-primary); }
.mgmt-bullet-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--sm-text); }
.mgmt-bullet-end { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--sm-muted); }
.mgmt-priorities { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.mgmt-priorities li { padding: .38rem 0; }
.mgmt-priorities li + li { border-top: 1px solid var(--sm-border); }
.mgmt-priority-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.mgmt-priorities small { color: var(--sm-muted); white-space: nowrap; }
.mgmt-accrual-key { margin-bottom: .6rem; }
.mgmt-legend i.mgmt-key-line { width: 1.1rem; height: 0; border-radius: 0; border-top: 2px solid var(--sm-primary); }
.mgmt-legend i.mgmt-key-line.is-dash { border-top: 2px dashed #9ca3af; }
.mgmt-pipeline td, .mgmt-pipeline th { vertical-align: top; }
.mgmt-pipeline th:first-child, .mgmt-pipeline td:first-child { min-width: 8rem; white-space: nowrap; font-size: .875rem; }
.mgmt-pipeline th { font-size: .7rem; }
.mgmt-step { position: relative; min-width: 6rem; padding-top: 1.4rem !important; font-size: .8rem; }
.mgmt-step::before { content: ""; position: absolute; top: .78rem; inset-inline: 0; height: 2px; background: var(--sm-border-strong); }
.mgmt-step > i { position: absolute; top: .45rem; inset-inline-start: .3rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--sm-success); box-shadow: 0 0 0 2px var(--sm-surface); }
.mgmt-step.is-expiring > i { background: var(--sm-warning); }
.mgmt-step.is-expired > i { background: var(--sm-danger); border-radius: 2px; }
.mgmt-step.is-missing > i, .mgmt-step.is-none > i { background: var(--sm-surface); box-shadow: inset 0 0 0 2px var(--sm-warning), 0 0 0 2px var(--sm-surface); }
.mgmt-step.is-recorded > i { background: var(--sm-surface); box-shadow: inset 0 0 0 2px var(--sm-primary), 0 0 0 2px var(--sm-surface); }
.mgmt-step.is-some > i { background: var(--sm-primary); }
.mgmt-step.is-hidden > i { background: var(--sm-border-strong); }
.mgmt-step.is-patient > i { background: var(--sm-text); }
.mgmt-step.is-open > i { background: var(--sm-surface); box-shadow: inset 0 0 0 2px var(--sm-border-strong), 0 0 0 2px var(--sm-surface); }
.mgmt-step small { display: block; }
.mgmt-step-text { display: block; white-space: nowrap; }
.mgmt-journey { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.mgmt-journey-step { display: flex; align-items: stretch; flex: 1 0 auto; }
.mgmt-journey-gap { flex: 0 0 auto; align-self: flex-start; margin-top: .55rem; padding: 0 .45rem; font-size: .72rem; color: var(--sm-muted); white-space: nowrap; border-bottom: 2px solid var(--sm-border-strong); }
.mgmt-journey-card { flex: 1 1 auto; min-width: 8.5rem; padding: .45rem .6rem; font-size: .8rem; border: 1px solid var(--sm-border); border-radius: 6px; }
.mgmt-journey-step:first-child { flex: 0 0 auto; }
.mgmt-journey-card > b, .mgmt-journey-card > span, .mgmt-journey-card > small { display: block; }
.mgmt-journey-card .mgmt-flow { margin: .35rem 0; }
.mgmt-journey-card ul { margin: 0; padding: 0; list-style: none; }
.mgmt-journey-card li { display: flex; justify-content: space-between; gap: .5rem; }
.mgmt-heat td, .mgmt-heat th { font-size: .8rem; white-space: nowrap; }
.mgmt-heat td:not(:first-child) { min-width: 3.25rem; border-inline-start: 2px solid var(--sm-surface); }
.mgmt-heat td.is-1 { background: #dbe7fd; }
.mgmt-heat td.is-2 { background: #7dadf8; }
.mgmt-heat td.is-3 { background: #2563eb; color: #fff; }
.mgmt-heat td.is-4 { background: #1e3a8a; color: #fff; }
@media (max-width: 991.98px) {
    .mgmt-grid > * { grid-column: span 12; }
    .mgmt-bullet { grid-template-columns: minmax(0, 1fr) auto; }
    .mgmt-bullet-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media print {
    .mgmt-twin, .mgmt-bar-top, .mgmt-forms, .mgmt-views { display: none; }
    .mgmt-grid > * { break-inside: avoid; }
    .mgmt-tabs-on .mgmt-tab, .mgmt-tabs-on .mgmt-view { display: block !important; height: auto !important; }
}