/* =============================================
   IARC Registry — Modern Dashboard Theme
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

body, .rc-layout, .form-control {
    font-family: 'Inter', sans-serif;
}

/* ── Typography ── */
body, #west, #center, .menubox, .x-panel, table {
    
}

/* ── Suppress REDCap noise ── */
#formSaveTip { display: none !important; }
#user_list   { display: none !important; }
#menu-div .hang > span[style*="color:#777"] { display: none !important; }
img.missingDataButton { display: none !important; }

/* ─────────────────────────────────────────────
   RECORD STATUS DASHBOARD — 3-block layout
   ───────────────────────────────────────────── */
#rsd-blocks-container {
    margin: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rsd-block {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.rsd-block-header {
    background: #2B3256;
    color: #fff;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rsd-block-header i.rsd-header-icon {
    font-size: 40px;
    opacity: 0.9;
}

.rsd-block-header .rsd-count {
    margin-left: auto;
    background: rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
}

.rsd-block-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 20px;
    background: #fafafa;
}

.rsd-block-list-empty {
    padding: 14px 20px;
    background: #fafafa;
    color: #bbb;
    font-size: 12px;
    font-style: italic;
}

.rsd-record-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s, background 0.15s;
    width: 24%;
}

.rsd-record-item:hover {
    background: #f0f0f0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    text-decoration: none;
    cursor: pointer ;
}

.rsd-record-item img.rc-form-menu-icon {
    width: 18px;
    height: 18px;
}

.rsd-file-icon {
    color: #D27F65;
    font-size: 4em ;
}

.rsd-block-list-empty { display: none; }

.rsd-record-id {
    font-weight: bold;
    font-size: 13px;
}

.rsd-record-dag {
    color: #bbb;
    font-size: 11px;
    margin-left: 1px;
}

.rsd-record-date {
    font-size: 10px;
    color: #999;
    margin-left: auto;
    white-space: nowrap;
}

.rsd-empty {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 30px 16px;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.rsd-empty-action {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 16px;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: #fff !important;
    background: #2B3256;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.rsd-empty-action:hover {
    background: #D27F65;
    color: #fff;
    text-decoration: none;
}

/* ── Page Background ── */
body {
    background: #f0f4f9 !important;
}

/* ─────────────────────────────────────────────
   MAIN WINDOW
   ───────────────────────────────────────────── */
div.mainwindow {
    display: block;
    background: #f0f4f9;
    padding: 0;
    padding-top: 0px; /* offset for fixed navbar */
    width: 100%;
    max-width: 100%;
    margin: auto;
}

/* ─────────────────────────────────────────────
   TOP NAVBAR  (override inline style)
   ───────────────────────────────────────────── */
nav.rcproject-navbar {
    background: #1b2a4a !important;
    border-bottom: none !important;
    box-shadow: 0 2px 10px rgba(27, 42, 74, 0.35) !important;
}

nav.rcproject-navbar .navbar-brand {
    color: #e8edf5 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

nav.rcproject-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ─────────────────────────────────────────────
   LAYOUT ROW
   ───────────────────────────────────────────── */
#mainwindowsub {
    min-height: calc(100vh - 56px);
    margin: 0 !important;
    align-items: stretch;
}

/* ─────────────────────────────────────────────
   LEFT SIDEBAR
   ───────────────────────────────────────────── */
#west {
    background: #1b2a4a;
    min-width: 340px !important;
    max-width: 340px !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
    border: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

#left_col {
    max-width: 50%;
    background: #1b2a4a;
    color: #c4d0e8;
    margin: auto;
    padding: 10px 40px;
    border-radius: 5px;
}

#left_col h4 {
    color: #fff !important;
    padding: 15px 3px !important;
    margin-top: 20px !important ;
}

/* ── Logo block ── */
#project-menu-logo {
    background: #fff;
    border-radius: 3px;
    padding: 10px 12px;
    margin: 14px 10px 8px;
    text-align: center;
    line-height: 1;
}

#project-menu-logo img {
    height: 36px !important;
    display: block;
    margin: 0 auto;
}

/* ── User info line ── */
#menu-div .menubox > div[style*='font-size:11px'],
#menu-div .menubox div[style*='font-size:11px;color:#6f6f6f'] {
    color: #7085a8 !important;
    font-size: 11px !important;
    padding: 0 14px;
    margin: 0 0 6px !important;
    line-height: 1.6;
}

#menu-div .menubox > div[style*='font-size:11px'] *,
#menu-div .menubox div[style*='font-size:11px;color:#6f6f6f'] * {
    color: #fff !important;
    font-weight: bold !important;
}

/* ── Sidebar links (generic) ── */
#west a {
    color: #c4d0e8 !important;
    font-size: 14px;
    text-decoration: none !important;
    transition: color 0.15s ease;
    outline: none;
    cursor: pointer;
}


#west a:hover {
    color: #ffffff !important;
}

#west .opacity65 a{
    color: #ffffff !important;
}

/* ── .hang nav items ── */
#west .hang {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 14px!important ;
    margin: 1px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
    cursor: pointer;
    /* Reset potential float-based layout */
    float: none !important;
    clear: both;
}

#west .hang a {
    margin-left: 0;
}

.bot-left:after{
    display: none ;
}

#west .hang:hover {
    background: rgba(255, 255, 255, 0.07);
}

/* Override inline icon positioning and color — ALL descendants */
#west .hang i,
#west .hang img {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    color: #5a7099 !important;
    font-size: 16px;
    width: 18px;
    flex-shrink: 0;
    vertical-align: middle;
}

#west .hang a {
    position: static !important;
    margin-left: 20px !important;
    vertical-align: middle;
}

/* ── Contact link in menu-div (top of sidebar, NOT a full button) ── */
#menu-div .btn-contact-admin {
    color: #7085a8 !important;
    font-size: 12px !important;
    font-style: italic;
}

/* ── Sidebar panels ── */
.x-panel {
    background: transparent !important;
    border: none !important;
    margin-bottom: 0 !important;
}

.x-panel-header,
.x-panel-header-leftmenu {
    background: #243457 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 7px 14px !important;
    border: none !important;
    border-top: 1px solid #1b2a4a !important;
}

/* Hide toggle arrows */
.x-panel-header .projMenuToggle,
.x-panel-header-leftmenu .projMenuToggle {
    display: block !important;
}

.x-panel-body {
    background: #1b2a4a !important;
    border: none !important;
}

.menubox {
    background: transparent !important;
    padding: 0 !important;
}

/* ── Extres panel: bookmarks as proper action buttons ── */
.x-panel#extres_panel .x-panel-bwrap .menubox {
    min-height: unset !important;
    padding: 10px 10px !important;
}

.x-panel#extres_panel .hang {
    margin: 4px 0 !important;
    padding: 0 !important;
}

.x-panel#extres_panel .hang a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding:  9px 14px 9px 40px!important ;;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #d5e0f2 !important;
    font-size: 13px !important;
    font-weight: 500;
    transition: all 0.15s ease;
    text-decoration: none !important;
    box-sizing: border-box;
    margin-left: 5px
}

.x-panel#extres_panel .hang a:hover {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.x-panel#extres_panel .hang > i,
.x-panel#extres_panel .hang > .fas {
    color: #d97059 !important;
    font-size: 20px;
    margin-left: 18px !important;
}

.x-panel#dashboard_panel a span,
.x-panel#report_panel a span,
.x-panel#external_modules_panel a span,
.x-panel#help_panel a span
{
    font-size: 9px!important;
}

#home_setup_panel .menubox{
    padding: 5px 10px !important ;
}

/* ─────────────────────────────────────────────
   SUBHEADER / PROJECT TITLE BAR
   ───────────────────────────────────────────── */
#subheader,
.navbar,
#redcap-home-navbar-collapse {
    background: #1b2a4a;
    color: #fff;
}

#subheader {
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%);
    padding: 14px 24px;
    border-bottom: 3px solid #d97059;
    margin: 0;
}


#subheaderDiv2 {
    color: #f1f5f9 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    max-width: none ;
}

.browseProjPid{
    background: #d97059 ;
}

#subheaderDiv2 * {
    color: #fff !important;
}

/* ─────────────────────────────────────────────
   DAG SWITCHER BLOCK
   ───────────────────────────────────────────── */

/* Always visible regardless of number of DAGs */
#dag-switcher-current-dag-block {
    display: block !important;
    margin-left: 0px;
    margin-bottom: 20px;
    max-width: 100%;
    text-indent: -11px;
    padding-left: 30px;
    font-size: 13px;
}

/* DAG code label — salmon, prominent */
#dag-switcher-current-dag-block b.ms-2 {
    color: #D27F65 !important;
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Fallback badge injected into #subheader when dag-switcher block is absent (single-DAG user) */
.dag-code-subheader {
    float: right;
    color: #D27F65 !important;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project_setup_tabs{
    margin: 5px 0px 15px 0px !important;
}

#redcap-home-navbar-collapse {
    border-top: 1px solid #243457;
}

#redcap-home-navbar-collapse a.nav-link {
    color: #c4d0e8 !important;
}

#redcap-home-navbar-collapse a:hover,
#redcap-home-navbar-collapse li.active {
    background: #d97059;
    color: #fff !important;
    border-radius: 5px;
}

#redcap-home-navbar-collapse li.active a{
    color: #fff !important;
}

#redcap-home-navbar-collapse ul.nav.navbar-nav li.nav-item{
    margin: 0px 5px ;
}


/* ─────────────────────────────────────────────
   CENTER / MAIN CONTENT
   ───────────────────────────────────────────── */
#center {
    margin: 20px;
    background: #f0f4f9;
    padding: 0 !important; /* Remove Bootstrap .col gutters; children control spacing */
    padding-bottom: 50px!important ;
}

/* Override inline max-width:800px on home page dashboard wrapper */
#center > div[style*='max-width'] {
    max-width: none !important;
    width: 100% !important;
    padding-bottom: 25px;
}

/* Breathing room for actual content after the nav zones */
#center > div[style*='max-width'] > .d-flex,
#center > div[style*='max-width'] > *:not(#sub-nav):not(.btn-group) {
    padding: 20px 24px 0;
}

/* ─────────────────────────────────────────────
   NAV TABS  (home page)
   ───────────────────────────────────────────── */
#sub-nav.project_setup_tabs {
    background: #ffffff;
    border: none !important;
    border-radius: 0;
    padding: 6px 18px;
    margin: 0 0 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid #e2e8f0 !important;
}

#sub-nav.project_setup_tabs ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 2px;
    border: none !important;
}

#sub-nav.project_setup_tabs li {
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
    float: none;
}

#sub-nav.project_setup_tabs li a {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

#sub-nav.project_setup_tabs li:hover a,
#sub-nav.project_setup_tabs li.active a {
    background: #1b2a4a !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   DATA ENTRY TOP OPTIONS  (add_record page)
   ───────────────────────────────────────────── */

#online-designer-hint-card{
    top: 365px !important;
    right: 210px!important;
    left: auto!important ;
}

#dataEntryTopOptions {
    background: #ffffff;
    margin: 10px 0 0 0;
    border-bottom: 1px solid #e2e8f0;
}

#dataEntryTopOptionsButtons {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

/* "Actions:" label */
#dataEntryTopOptionsButtons > span[data-rc-lang] {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 !important;
}

/* PDF button — override jQuery UI + inline styles */
#dataEntryTopOptionsButtons .jqbuttonmed,
#dataEntryTopOptionsButtons button.jqbuttonmed {
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-family: inherit !important;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(27, 42, 74, 0.2) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease !important;
}

#dataEntryTopOptionsButtons .jqbuttonmed:hover {
    opacity: 0.88 !important;
    box-shadow: 0 3px 10px rgba(27, 42, 74, 0.3) !important;
}

/* Remove the dropdown arrow image inside the button */
#dataEntryTopOptionsButtons .jqbuttonmed img {
    display: none !important;
}

/* Video tutorial link */
#dataEntryTopOptionsButtons .nowrap {
    margin-left: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    color: #94a3b8 !important;
    font-size: 12px;
}

#dataEntryTopOptionsButtons .nowrap a,
#dataEntryTopOptionsButtons .nowrap i {
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

#dataEntryTopOptionsButtons .nowrap a:hover {
    color: #64748b !important;
    text-decoration: underline !important;
}

/* Form title */
#form-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.01em;
}

#form-title .fas,
#form-title i {
    color: #d97059;
    font-size: 16px;
}

#form-title > div {
    display: none; /* Hide the empty print div */
}

/* ─────────────────────────────────────────────
   DATA ENTRY — FIELD ICONS (history + comment)
   ───────────────────────────────────────────── */

/* Hide REDCap native PNGs */
.rc-field-icons img[src*="history.png"],
.rc-field-icons img[src*="balloon_left"] { display: none !important; }

/* Make the <a> wrappers icon-only containers */
.rc-field-icons a[onclick*="dataHist"],
.rc-field-icons a[onclick*="dataResPopup"] {
    display: inline-block;
    text-decoration: none;
    font-size: 0;               /* hide any residual text nodes */
    line-height: 1.4;
    margin: 2px 0;
    transition: transform 0.15s;
}

/* History — fa-history */
.rc-field-icons a[onclick*="dataHist"]::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    content: "\f1da";
    color: #D27F65;
}

/* Data-query / comment — fa-comment-dots */
.rc-field-icons a[onclick*="dataResPopup"]::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    content: "\f4ad";
    color: #D27F65;
}

/* Hover: darken + slight scale */
.rc-field-icons a[onclick*="dataHist"]:hover::before,
.rc-field-icons a[onclick*="dataResPopup"]:hover::before { color: #b5623d; }
.rc-field-icons a[onclick*="dataHist"]:hover,
.rc-field-icons a[onclick*="dataResPopup"]:hover         { transform: scale(1.18); }

/* ─────────────────────────────────────────────
   DASHBOARD CARDS  (home page)
   ───────────────────────────────────────────── */

/* Strip inline gray background from card header wrapper */
#user_list > [style*='#D7D7D7'],
#stats_table > [style*='#D7D7D7'],
.flex-grow-1.fs12 [style*='#D7D7D7'] {
    background-color: transparent !important;
    padding: 0 !important;
}

/* Card containers */
#user_list,
#stats_table {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05);
    margin: 0 !important;
}

.d-flex.flex-wrap.gap-2 .flex-grow-1.fs12:nth-child(2){
    display: none ;
}

.d-flex.flex-wrap.gap-2 .flex-grow-1.fs12{
    min-width: 500px ;
}

/* tables statistics landing/home page */
table#table-stats_table tr td:nth-child(1){
    width: 20% ;
}

table#table-stats_table tr td:nth-child(2){
    text-align: left !important ;
}



/* Card headers */
.ftitle,
.flexigrid div.mDiv div.ftitle {
    background: #1b2a4a !important;
    color: #f1f5f9 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border: none !important;
}

.ftitle i,
.ftitle .fas,
.ftitle .fa {
    color: #d97059 !important;
    margin-right: 6px;
}

.round{
    border-radius: 5px;
    margin: 20px 20px;
    padding: 20px !important;
}

.chklist{
    max-width: 95%;
}

/* ─────────────────────────────────────────────
   DATA TABLES
   ───────────────────────────────────────────── */
.table {
    margin: 0;
    font-size: 13px;
    border-collapse: collapse;
}

.table thead th {
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px !important;
    cursor: pointer;
}

.table tbody td {
    padding: 10px 14px !important;
    color: #374151;
    border-color: #f1f5f9 !important;
    vertical-align: middle;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: #e2e8f0 !important;
}

.table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: #f8fafc;
}

.table-hover > tbody > tr:hover > td {
    background-color: #eff6ff;
}

#questiontable {
    background: #f8fafc;
}

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */
.btn-primaryrc {
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 4px rgba(27, 42, 74, 0.22) !important;
    transition: all 0.2s ease !important;
}

.btn-primaryrc:hover {
    opacity: 0.88 !important;
    box-shadow: 0 4px 12px rgba(27, 42, 74, 0.32) !important;
    transform: translateY(-1px) !important;
}

/* Contact admin — full button (in help_panel) */
a.btn-contact-admin.btn {
    background: linear-gradient(135deg, #d97059 0%, #c15a44 100%) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    border: none !important;
    padding: 7px 14px !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
#south {
    padding: 14px 24px;
    margin-top: 24px;
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%) ; 
    border-bottom: 3px solid #d97059;
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
    left: 0;
    margin: 0 !important;
}

#south table {
    width: 100%;
}

#south table td {
    color: #94a3b8;
    font-size: 12px;
    padding: 0;
    border: none !important;
    background: transparent !important;
}

#south a {
    color: #94a3b8 !important;
    text-decoration: underline;
}

#south a:hover {
    color: #64748b !important;
}

/* ─────────────────────────────────────────────
   MY PROJECTS PAGE
   ───────────────────────────────────────────── */

/* Navbar (different selector from project pages) */
nav.navbar.navbar-expand-md {
    background: #1b2a4a !important;
    border-bottom: none !important;
    box-shadow: 0 2px 10px rgba(27, 42, 74, 0.35) !important;
    padding: 0 16px !important;
}

/* Logo in navbar — IARC logo replacing REDCap img */
nav.navbar.navbar-expand-md .navbar-brand {
    padding: 6px 16px !important;
    border-radius: 6px;
    margin-right: 16px;
    display: inline-flex !important;
    align-items: center;
    min-width: 160px;
    min-height: 44px;
}

/* Hide REDCap img */
nav.navbar.navbar-expand-md .navbar-brand img {
    display: none !important;
}

/* Inject IARC logo — white filter for dark navbar */
nav.navbar.navbar-expand-md .navbar-brand::after {
    content: '';
    display: block;
    width: 140px;
    height: 36px;
    background: url('https://www.iarc.who.int/wp-content/themes/iarc-theme-new/images/layout/logo.svg') left center / contain no-repeat;
    filter: brightness(0) invert(1);
}

/* Nav links */
nav.navbar.navbar-expand-md .nav-link,
nav.navbar.navbar-expand-md .nav-item a.nav-link {
    color: #c4d0e8 !important;
    font-size: 13px;
    padding: 14px 10px !important;
    transition: color 0.15s ease;
}

nav.navbar.navbar-expand-md .nav-item.active a.nav-link,
nav.navbar.navbar-expand-md .nav-item a.nav-link:hover {
    color: #ffffff !important;
}

/* User info in nav */
nav.navbar.navbar-expand-md .nohighlighthover a.nav-link,
nav.navbar.navbar-expand-md .nohighlighthover a.nav-link * {
    color: #8899bb !important;
    font-size: 11px !important;
}

nav.navbar.navbar-expand-md #username-reference {
    color: #c4d0e8 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Dropdown menu */
nav.navbar.navbar-expand-md .dropdown-menu {
    background: #1b2a4a;
    border: 1px solid #2d4070;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

nav.navbar.navbar-expand-md .dropdown-menu .nav-link {
    color: #c4d0e8 !important;
    padding: 8px 16px !important;
}

nav.navbar.navbar-expand-md .dropdown-menu .nav-link:hover {
    background: rgba(255,255,255,0.07);
    color: #fff !important;
}

/* Page container */
#pagecontainer {
    background: #f0f4f9;
    padding: 80px 32px 32px !important; /* 80px = navbar height + breathing room */
    min-height: 100vh;
    max-width: 75%;
}

#container,
#pagecontent {
    background: transparent;
}

/* Welcome / description text */
#pagecontainer > div[style*='margin-bottom:10px'] p,
#pagecontent + div p {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.col-md-12[class*='d-none'] {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

/* ── Flexigrid project table ── */
.flexigrid {
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05) !important;
    border: none !important;
}

/* Column header row */
.flexigrid .hDiv {
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.flexigrid .hDiv table th,
.flexigrid .hDiv table th div {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: transparent !important;
    border: none !important;
    padding: 10px 14px !important;
    cursor: pointer;
}

/* Data rows */

#record_status_table_wrapper{
    margin-bottom: 100px ; 
}

.flexigrid .bDiv {
    background: #ffffff !important;
}

#table-proj_table tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s ease;
}

#table-proj_table tr:last-child {
    border-bottom: none;
}

#table-proj_table td {
    padding: 12px 14px !important;
    color: #374151;
    font-size: 13px;
    background: transparent;
    border: none !important;
    vertical-align: middle;
}

#table-proj_table tr.myprojstripe td {
    background: #f8fafc !important;
}

#table-proj_table tr:hover td {
    background: #eff6ff !important;
}

/* Project title link */
.projtitle a.aGrid {
    color: #1b2a4a !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.projtitle a.aGrid:hover {
    color: #d97059 !important;
}

/* Column count values */
.flexigrid .bDiv .fc {
    color: #64748b;
    font-size: 12px;
}

/* Search input in ftitle */
#proj_search {
    background: #f0f4f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    color: #374151 !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
}

/* Organize / Collapse buttons in ftitle */
.ftitle .btn-defaultrc {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 5px !important;
    color: #e2e8f0 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    margin-left: 8px !important;
}

.ftitle .btn-defaultrc:hover {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

/* Mobile list view */
.list-group-item {
    border-color: #e2e8f0 !important;
    color: #374151;
    font-size: 13px;
}

.list-group-item[style*='background-color:#D7D7D7'] {
    background-color: #1b2a4a !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    border: none !important;
}

.list-group-item.myprojmitem:hover {
    background: #eff6ff !important;
}

/* ── My Projects table: always visible (override Bootstrap d-none d-sm-block) ── */
#proj_table {
    display: block !important;
}

/* ── Hide PID (col 2), Records (col 3), Fields (col 4), Instruments (col 5) ── */
#proj_table .hDiv table th:nth-child(2),
#proj_table .hDiv table th:nth-child(3),
#proj_table .hDiv table th:nth-child(4),
#proj_table .hDiv table th:nth-child(5),
#table-proj_table td:nth-child(2),
#table-proj_table td:nth-child(3),
#table-proj_table td:nth-child(4),
#table-proj_table td:nth-child(5) {
    display: none !important;
}

/* Page footer */
#footer {
    color: #94a3b8 !important;
    font-size: 12px;
    padding: 16px 0 !important;
    margin-top: 20px;
    border-top: 1px solid #e2e8f0;
}

#footer a {
    color: #94a3b8 !important;
    text-decoration: underline;
}

#footer a:hover {
    color: #64748b !important;
}

/* ─────────────────────────────────────────────
   DATA ENTRY FORM  (registry_add_record)
   Reference: #form-title — white bg, 24px h-padding, salmon accent
   ───────────────────────────────────────────── */

/* Expand the form wrapper beyond the 800px inline cap */
form#form > div[style*='max-width'] {
    max-width: none !important;
    width: 65% !important;
    padding: 0 24px 32px !important;
}

/* Main form table */
table.form_border {
    background: #ffffff;
    border-collapse: collapse !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0;
}

/* ── Override the inline <style> block that sets #f5f5f5 background ── */
.data,
.labelrc,
.data_matrix,
.labelmatrix {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 13px 16px !important;
    vertical-align: middle;
}

/* Label column */
.labelrc {
    padding-left: 24px !important;
    width: 50% !important;
}

/* Label text */
.labelrc label,
.labelrc div[data-kind="field-label"],
.labelrc .label-fl {
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.field-column.field-type-list .field-data, .field-column.field-password .field-data{
    margin-top: 0px ;
}

/* Inline form-label-table — reset REDCap spacing */
table.form-label-table {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

table.form-label-table td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    vertical-align: top;
}

/* Data/value column */
.data {
    padding-right: 24px !important;
}

/* ── Section header rows (.header) ── */
td.header {
    background: #f0f4f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 10px 24px !important;
    border-top: 2px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* ── Context message banner ("Adding new RECORD ID…") ── */
td.context_msg {
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%) !important;
    padding: 12px 24px !important;
    border: none !important;
}

td.context_msg .darkgreen,
td.context_msg * {
    color: green !important; /* soft green on dark bg */
    font-size: 13px;
    font-weight: 500;
}

td.context_msg i.text-successrc,
td.context_msg .fa-circle-plus {
    color: #34d399 !important;
}

/* ── Inputs, selects, textareas ── */
input.x-form-text,
input.x-form-field,
select.x-form-text,
select.x-form-field,
textarea.x-form-field {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 5px 0px !important ;
    font-size: 13px !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    outline: none !important;
}

input.x-form-text:focus,
input.x-form-field:focus,
select.x-form-text:focus,
select.x-form-field:focus,
textarea.x-form-field:focus {
    border-color: #1b2a4a !important;
    box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.1) !important;
    background: #ffffff !important;
}

textarea.x-form-field {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

/* Read-only / calc fields */
input.calcChanged,
input[readonly] {
    background: #f1f5f9 !important;
    color: #64748b !important;
    cursor: default;
}

/* ── Required field indicator ── */
.requiredlabel {
    color: #d97059 !important;
    font-size: 11px !important;
    font-style: italic;
    font-weight: normal !important;
    margin-top: 2px;
}

/* ── Row highlight on hover ── */
#questiontable tbody tr:not(#__SUBMITBUTTONS__-tr):hover .labelrc,
#questiontable tbody tr:not(#__SUBMITBUTTONS__-tr):hover .data {
    background: #fafbff !important;
}

/* ── Submit buttons row ── */
#__SUBMITBUTTONS__-tr .labelrc {
    display: none !important; /* empty label col — hide it */
}

#__SUBMITBUTTONS__-tr .data {
    width: auto !important;
    background: #f8fafc !important;
    border-top: 2px solid #e2e8f0 !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}

#__SUBMITBUTTONS__-div {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Save & Exit / Save & Stay buttons */
#__SUBMITBUTTONS__-div .btn-primaryrc {
    font-size: 13px !important;
    padding: 8px 18px !important;
    margin: 0 !important;
}

/* Cancel button */
#__SUBMITBUTTONS__-div .btn-defaultrc {
    background: transparent !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    color: #64748b !important;
    font-size: 13px !important;
    padding: 7px 16px !important;
    margin-top: 0 !important;
}

#__SUBMITBUTTONS__-div .btn-defaultrc:hover {
    background: #f1f5f9 !important;
    color: #374151 !important;
}

/* Dropdown "more save options" button */
.btn-savedropdown {
    border-left: 1px solid rgba(255,255,255,0.25) !important;
    padding: 8px 10px !important;
}

/* ─────────────────────────────────────────────
   LOGIN PAGE
   ───────────────────────────────────────────── */

/* Full-viewport branded background */
body:has(#rc-login-form) {
    background: #ffffff !important;
    min-height: 100vh;
}

body:has(#rc-login-form) #pagecontainer {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px !important;
}

/* Kill inline REDCap logo background on #container */
body:has(#rc-login-form) #container {
    background-image: none !important;
    background: transparent !important;
    width: 100%;
    max-width: 480px !important;
}

body:has(#rc-login-form) #pagecontent {
    background: transparent !important;
    width: 100%;
    margin-top: -100px !important;
}

/* IARC logo centered above the login card */
body:has(#rc-login-form) #pagecontent::before {
    content: '';
    display: block;
    height: 68px;
    background: url('https://www.iarc.who.int/wp-content/themes/iarc-theme-new/images/layout/logo.svg') center / contain no-repeat;
    margin: 0 auto 28px;
}

/* Login card */
body:has(#rc-login-form) #left_col {
    max-width: 100% !important;
    width: 100%;
    border-radius: 12px !important;
    padding: 30px 40px 36px !important ;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 0 !important;
}

body:has(#rc-login-form) #left_col h4 {
    margin-top: 0 !important;
}

/* Subtitle / welcome text */
body:has(#rc-login-form) #left_col > div p {
    color: #8899bb !important;
    font-size: 13px;
    margin-bottom: 0;
}

/* Input group label */
body:has(#rc-login-form) .input-group-text {
    background: #243457 !important;
    border-color: #2d4070 !important;
    color: #c4d0e8 !important;
    font-size: 13px !important;
}

/* Text & password inputs */
body:has(#rc-login-form) .form-control {
    background: #243457 !important;
    border-color: #2d4070 !important;
    color: #f1f5f9 !important;
    font-size: 13px !important;
}

body:has(#rc-login-form) .form-control:focus {
    background: #2d4070 !important;
    border-color: #d97059 !important;
    box-shadow: 0 0 0 3px rgba(217, 112, 89, 0.2) !important;
    color: #fff !important;
    outline: none !important;
}

/* Login button */
body:has(#rc-login-form) #login_btn {
    background: linear-gradient(135deg, #d97059 0%, #c15a44 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 8px 22px !important;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(217, 112, 89, 0.35) !important;
    transition: all 0.15s ease !important;
}

body:has(#rc-login-form) #login_btn:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 14px rgba(217, 112, 89, 0.45) !important;
    transform: translateY(-1px);
}

/* Forgot password link */
body:has(#rc-login-form) #rc-login-form a {
    color: #7085a8 !important;
}

body:has(#rc-login-form) #rc-login-form a:hover {
    color: #c4d0e8 !important;
}

/* Hide info blocks and footer on login */
#left_col ~ hr,
#left_col ~ .row {
    display: none !important;
}

body:has(#rc-login-form) #footer {
    display: none !important;
}

/* ─────────────────────────────────────────────
   PASSWORD RECOVERY PAGE
   Match login page styling
   ───────────────────────────────────────────── */

/* Full-viewport branded background */
body:has(#pass-reset-form) {
    background: #ffffff !important;
    min-height: 100vh;
}

body:has(#pass-reset-form) #pagecontainer {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px !important;
    margin-top: -100px;
}

body:has(#pass-reset-form) #container {
    background: transparent !important;
    width: 100%;
    max-width: 480px !important;
}

body:has(#pass-reset-form) #pagecontent {
    background: transparent !important;
    width: 100%;
}

/* IARC logo centered above the card */
body:has(#pass-reset-form) #pagecontent::before {
    content: '';
    display: block;
    height: 68px;
    background: url('https://www.iarc.who.int/wp-content/themes/iarc-theme-new/images/layout/logo.svg') center / contain no-repeat;
    margin: 0 auto 28px;
}

/* Password recovery card */
body:has(#pass-reset-form) #pagecontent > h4 {
    background: #1b2a4a !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    padding: 35px 30px 10px 30px !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    text-align: left ;
}

body:has(#pass-reset-form) #pagecontent > p {
    background: #1b2a4a;
    color: #8899bb !important;
    font-size: 13px;
    padding: 20px 30px 20px !important;
    margin: 0;
    line-height: 1.5;
}

/* Form container */
body:has(#pass-reset-form) #pass-reset-form {
    background: #1b2a4a;
    padding: 0 10px 30px !important;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45) !important;
}

/* Table styling */
body:has(#pass-reset-form) #pass-reset-form table.blue {
    background: transparent !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body:has(#pass-reset-form) #pass-reset-form table.blue td {
    background: transparent !important;
    border: none !important;
    padding: 10px 15px !important;
}

/* Username label */
body:has(#pass-reset-form) #pass-reset-form table.blue b {
    color: #c4d0e8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Username input */
body:has(#pass-reset-form) #pass-reset-form input[name="username"] {
    background: #243457 !important;
    border: 1px solid #2d4070 !important;
    border-radius: 6px !important;
    color: #f1f5f9 !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    width: 200px !important;
}

body:has(#pass-reset-form) #pass-reset-form input[name="username"]:focus {
    background: #2d4070 !important;
    border-color: #d97059 !important;
    box-shadow: 0 0 0 3px rgba(217, 112, 89, 0.2) !important;
    color: #fff !important;
    outline: none !important;
}

/* Submit button */
body:has(#pass-reset-form) #pass-reset-form .btn-primaryrc {
    background: linear-gradient(135deg, #d97059 0%, #c15a44 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(217, 112, 89, 0.35) !important;
    transition: all 0.15s ease !important;
}

body:has(#pass-reset-form) #pass-reset-form .btn-primaryrc:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 14px rgba(217, 112, 89, 0.45) !important;
    transform: translateY(-1px);
}

/* Hide spacer divs and footer */
body:has(#pass-reset-form) .space {
    display: none !important;
}

body:has(#pass-reset-form) #footer {
    display: none !important;
}

/* ─────────────────────────────────────────────
   PASSWORD RESET PAGE  (form[name="passform"])
   Matches login page styling.
   ───────────────────────────────────────────── */

body:has(form[name="passform"]) {
    background: #ffffff !important;
    min-height: 100vh;
}

body:has(form[name="passform"]) #pagecontainer {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 16px !important;
    margin-top: -100px;
}

body:has(form[name="passform"]) #container {
    background: transparent !important;
    width: 100%;
    max-width: 480px !important;
}

body:has(form[name="passform"]) #pagecontent {
    background: transparent !important;
    width: 100%;
}

/* IARC logo above the card */
body:has(form[name="passform"]) #pagecontent::before {
    content: '';
    display: block;
    height: 68px;
    background: url('https://www.iarc.who.int/wp-content/themes/iarc-theme-new/images/layout/logo.svg') center / contain no-repeat;
    margin: 0 auto 28px;
}

/* Hide the REDCap logo image */
body:has(form[name="passform"]) #pagecontent > div:first-child {
    display: none !important;
}

/* Card title */
body:has(form[name="passform"]) #pagecontent > h4 {
    background: #1b2a4a !important;
    color: #fff !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    padding: 28px 30px 14px !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    text-align: left;
}

/* Instruction paragraph */
body:has(form[name="passform"]) #pagecontent > p {
    background: #1b2a4a;
    color: #8899bb !important;
    font-size: 12px;
    padding: 14px 30px 16px !important;
    margin: 0;
    line-height: 1.55;
}

body:has(form[name="passform"]) #pagecontent > p b {
    color: #c4d0e8 !important;
}

/* Form wrapper — rounds the bottom of the card */
body:has(form[name="passform"]) #pagecontent > center {
    display: block;
    background: #1b2a4a;
    padding: 4px 10px 28px !important;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45) !important;
}

/* Table */
body:has(form[name="passform"]) table.blue {
    background: transparent !important;
    border: none !important;
    margin: 0 auto !important;
}

body:has(form[name="passform"]) table.blue td {
    background: transparent !important;
    border: none !important;
    padding: 8px 12px !important;
    color: #c4d0e8 !important;
    font-size: 13px !important;
    vertical-align: middle;
}

/* Static username value */
body:has(form[name="passform"]) table.blue td[style*="color:#800000"] {
    color: #D27F65 !important;
    font-weight: 600 !important;
}

/* Password inputs */
body:has(form[name="passform"]) input.x-form-text.x-form-field {
    background: #243457 !important;
    border: 1px solid #2d4070 !important;
    border-radius: 6px !important;
    color: #f1f5f9 !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
    width: 220px !important;
}

body:has(form[name="passform"]) input.x-form-text.x-form-field:focus {
    background: #2d4070 !important;
    border-color: #d97059 !important;
    box-shadow: 0 0 0 3px rgba(217, 112, 89, 0.2) !important;
    color: #fff !important;
    outline: none !important;
}

/* Submit button */
body:has(form[name="passform"]) input[type="submit"].btn {
    background: linear-gradient(135deg, #d97059 0%, #c15a44 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 24px !important;
    box-shadow: 0 2px 8px rgba(217, 112, 89, 0.35) !important;
    cursor: pointer;
    transition: all 0.15s ease !important;
}

body:has(form[name="passform"]) input[type="submit"].btn:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 14px rgba(217, 112, 89, 0.45) !important;
    transform: translateY(-1px);
}

/* Hide footer */
body:has(form[name="passform"]) #footer {
    display: none !important;
}

/* ── Record ID row (static, no input) ── */
#record_id-tr .labelrc,
#record_id-tr .data {
    background: #f8fafc !important;
}

#record_id-tr .data span {
    font-weight: 700;
    color: #1b2a4a;
    font-size: 14px;
}

/* ─────────────────────────────────────────────
   SIDEBAR — LIGHT REDESIGN
   White body, dark-blue ftitle headers, breathable
   ───────────────────────────────────────────── */

/* White sidebar */
#west {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.06) !important;
}

/* Panel shell */
.x-panel {
    background: #ffffff !important;
    border-bottom: 1px solid #eef1f6 !important;
}

/* Panel body & menubox: white */
.x-panel-body {
    background: #ffffff !important;
}

.menubox {
    background: #ffffff !important;
    padding: 6px 0 !important;
}

/* Panel headers: dark blue (ftitle style) */
.x-panel-header,
.x-panel-header-leftmenu {
    background: #1b2a4a !important;
    border-top: none !important;
    padding: 9px 16px !important;
    cursor: pointer;
}

/* Logo block: flush, light separator — IARC logo */
#project-menu-logo {
    background: #f8fafc !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 14px 16px 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: block !important;
    min-height: 48px;
    position: relative;
}

/* Hide the REDCap img */
#project-menu-logo img {
    display: none !important;
}

/* Inject IARC logo as background */
#project-menu-logo::after {
    content: '';
    display: block;
    width: 100%;
    height: 70px;
    background: url('https://www.iarc.who.int/wp-content/themes/iarc-theme-new/images/layout/logo.svg') left center / contain no-repeat;
}

/* User info line: dark text on white */
#menu-div .menubox > div[style*='font-size:11px'],
#menu-div .menubox div[style*='font-size:11px;color:#6f6f6f'] {
    color: #64748b !important;
    padding: 8px 16px 2px !important;
    margin: 0 !important;
}

#menu-div .menubox > div[style*='font-size:11px'] *,
#menu-div .menubox div[style*='font-size:11px;color:#6f6f6f'] * {
    color: #1b2a4a !important;
    font-weight: 600 !important;
}

/* Contact admin */
#menu-div .btn-contact-admin {
    color: #64748b !important;
}

/* Sidebar links: dark on white */
#west a {
    color: #374151 !important;
    font-size: 8px !important;
}

#west a:hover {
    color: #1b2a4a !important;
}

/* Hang items */
#west .hang {
    padding: 7px 12px !important;
    margin: 1px 6px !important;
    border-radius: 6px;
    gap: 10px !important;
}

#west .hang:hover {
    background: #f0f4f9 !important;
}

#west .hang a {
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500;
    position: static !important;
    margin-left: 15px !important;
    vertical-align: middle;
}

#west .hang a:hover {
    color: #1b2a4a !important;
}

/* Sidebar icons: all descendants, fixed-width, static */
#west .hang i,
#west .hang img {
    color: #7085a8 !important;
    font-size: 14px !important;
    width: 18px !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0px !important;
    margin-left: 5px !important;
    text-align: left;
    flex-shrink: 0 !important;
    vertical-align: middle;
}

.fs10 {
    font-size: 10px !important;
    color: #fff !important;
}

/* Extres panel bookmarks: adapt to light theme */
.x-panel#extres_panel .x-panel-bwrap .menubox {
    padding: 8px 10px !important;
}

.x-panel#extres_panel .hang a {
    background: #f0f4f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #374151 !important;
    margin-left: 0px!important;
}

.x-panel#extres_panel .hang a:hover {
    background: #e8edf5 !important;
    border-color: #c4d0e8 !important;
    color: #1b2a4a !important;
}

.x-panel#extres_panel .hang > i,
.x-panel#extres_panel .hang > .fas {
    color: #d97059 !important;
}

/* Small panel labels in spans (report/dashboard counts) */
.x-panel#dashboard_panel a span,
.x-panel#report_panel a span,
.x-panel#external_modules_panel a span,
.x-panel#help_panel a span {
    color: #94a3b8 !important;
}

/* ── Report panel — .hangr items styled like extres_panel bookmarks ── */
.x-panel#report_panel .x-panel-bwrap .menubox {
    padding: 8px 10px !important;
}

.x-panel#report_panel .hangr {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 4px 0 !important;
    padding: 0 !important;
}

.x-panel#dashboard_panel .hangr a,
.x-panel#report_panel .hangr a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    flex: 1;
    padding: 9px 14px 9px 30px !important;
    background: #f0f4f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.x-panel#dashboard_panel .hangr a:hover,
.x-panel#report_panel .hangr a:hover {
    background: #e8edf5 !important;
    border-color: #c4d0e8 !important;
    color: #1b2a4a !important;
}

.x-panel#dashboard_panel.hangr .reportnum,
.x-panel#report_panel .hangr .reportnum {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    min-width: 20px;
    text-align: right;
}

/* ─────────────────────────────────────────────
   PROJECT SETUP PAGE — checklist cards
   ───────────────────────────────────────────── */

/* Checklist cards: white with rounded shadow, like flexigrid */
[id^='setupChklist-'],
.round.chklist {
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
    margin: 16px !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Inner table reset */
.round.chklist table {
    border-collapse: collapse !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Left status/icon column */
.round.chklist > table > tbody > tr > td:first-child {
    width: 76px !important;
    min-width: 76px;
    background: #f8fafc !important;
    border-right: 1px solid #e8edf5 !important;
    text-align: center !important;
    padding: 20px 10px !important;
    vertical-align: middle !important;
}

/* Right content column */
.round.chklist > table > tbody > tr > td:last-child {
    padding: 10px !important;
    vertical-align: top !important;
}

/* Card header = ftitle style */
.chklisthdr {
    background: #1b2a4a !important;
    color: #f1f5f9 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 20px !important;
    border: none !important;
    letter-spacing: 0.01em;
    display: block;
}

.chklisthdr * {
    color: #f1f5f9 !important;
}

.chklisthdr i,
.chklisthdr .fas,
.chklisthdr .fa {
    color: #d97059 !important;
    margin-right: 8px;
}

/* Card body */
.chklisttext {
    padding: 14px 20px 18px !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* Button containers in cards */
.chklistbtn {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Action buttons in cards */
.chklisttext .btn-defaultrc,
.chklisttext .btn-xs,
.chklisttext .jqbuttonmed {
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #374151 !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

.chklisttext .btn-defaultrc:hover {
    background: #e8edf5 !important;
    border-color: #94a3b8 !important;
    color: #1b2a4a !important;
}

/* "Complete!" status text */
[id^='lbl-'] {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 4px;
}

/* "Not complete?" toggle */
.chklist_comp a {
    color: #94a3b8 !important;
    font-size: 10px !important;
    text-decoration: underline !important;
}

/* ─────────────────────────────────────────────
   RECORD STATUS DASHBOARD
   ───────────────────────────────────────────── */

/* Always show intro/legend table (remove d-none d-sm-block behaviour) */
#center table.d-sm-block {
    display: table ;
    max-width: 100% !important;
    margin-bottom: 16px;
}

/* Legend box */
#rsd_legend {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
}

#status-icon-legend td {
    font-size: 12px;
    padding: 3px 8px !important;
    color: #374151;
    border: none !important;
}

/* Filter / pager controls bar */
.chklist.clearfix {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 0px 0px 20px 0 !important;
    margin: 10px 0 20px 20px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.chklist.clearfix > div {
    float: none !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
}

/* Main record status table */
#record_status_table {
    background: #ffffff;
    border-collapse: collapse !important;
    width: 100% !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05);
    border: none !important;
}

#record_status_table thead th {
    background: #1b2a4a !important;
    color: #f1f5f9 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 8px !important;
    text-align: center !important;
    border: none !important;
    white-space: normal;
    vertical-align: bottom !important;
}

#record_status_table thead th:first-child {
    text-align: left !important;
    padding-left: 16px !important;
    min-width: 140px;
    color: #f1f5f9 !important;
}

#record_status_table tbody tr.odd td  { background: #fafbfd; }
#record_status_table tbody tr.even td { background: #ffffff; }

#record_status_table tbody tr.odd:hover td,
#record_status_table tbody tr.even:hover td {
    background: #f0f4f9 !important;
}

#record_status_table tbody td {
    padding: 10px 8px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: center;
    vertical-align: middle;
}

/* Record ID column */
.rc-rsd-id-cell {
    text-align: left !important;
    padding-left: 16px !important;
}

.rc-rsd-id-cell a {
    color: #1b2a4a !important;
    font-weight: 700;
    font-size: 13px !important;
}

.rc-rsd-id-cell .crl {
    font-size: 11px;
    color: #64748b;
    font-weight: 400;
}

/* ── Status link → pill badge ── */
a.rc-rsd-status-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    border: 1px solid transparent !important;
    min-width: 92px;
}

/* Hide original circle image */
a.rc-rsd-status-link img.rc-form-menu-icon {
    display: none !important;
}

/* Complete — green */
a.rc-rsd-status-link:has(img[src*="circle_green"]) {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #6ee7b7 !important;
}
a.rc-rsd-status-link:has(img[src*="circle_green"])::before { content: '✓ '; }
a.rc-rsd-status-link:has(img[src*="circle_green"])::after  { content: 'Complete'; }
a.rc-rsd-status-link:has(img[src*="circle_green"]):hover   { background: #a7f3d0 !important; border-color: #34d399 !important; }

/* Unverified — amber */
a.rc-rsd-status-link:has(img[src*="circle_yellow"]) {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
}
a.rc-rsd-status-link:has(img[src*="circle_yellow"])::before { content: '? '; }
a.rc-rsd-status-link:has(img[src*="circle_yellow"])::after  { content: 'Unverified'; }
a.rc-rsd-status-link:has(img[src*="circle_yellow"]):hover   { background: #fde68a !important; border-color: #f59e0b !important; }

/* Incomplete — red */
a.rc-rsd-status-link:has(img[src*="circle_red"]) {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}
a.rc-rsd-status-link:has(img[src*="circle_red"])::before { content: '✗ '; }
a.rc-rsd-status-link:has(img[src*="circle_red"])::after  { content: 'Incomplete'; }
a.rc-rsd-status-link:has(img[src*="circle_red"]):hover   { background: #fecaca !important; border-color: #f87171 !important; }

/* No data — gray */
a.rc-rsd-status-link:has(img[src*="circle_gray"]) {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
}
a.rc-rsd-status-link:has(img[src*="circle_gray"])::before { content: '— '; font-size: 10px; }
a.rc-rsd-status-link:has(img[src*="circle_gray"])::after  { content: 'No data'; }
a.rc-rsd-status-link:has(img[src*="circle_gray"]):hover   { background: #e2e8f0 !important; border-color: #cbd5e1 !important; }

/* "+" add instance button */
.rc-add-new-instance-btn .btn {
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    background: #f0f4f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.rc-add-new-instance-btn .btn:hover {
    background: #1b2a4a !important;
    color: #fff !important;
    border-color: #1b2a4a !important;
}

/* Status filter toggle links */
a.statuslink_selected {
    font-weight: 700 !important;
    color: #1b2a4a !important;
    background: #e8edf5;
    padding: 3px 10px;
    border-radius: 4px;
    text-decoration: none !important;
}

a.statuslink_unselected {
    color: #64748b !important;
    padding: 3px 10px;
    border-radius: 4px;
    text-decoration: none !important;
}

a.statuslink_unselected:hover {
    background: #f0f4f9;
    color: #1b2a4a !important;
}

/* "Add new record" button */
.btn-rcgreen {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
    transition: all 0.15s ease !important;
}

.btn-rcgreen:hover {
    opacity: 0.88 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
}

/* Project status bar (Development / X of Y progress) */
#center > div > table[cellpadding] {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#center > div > table[cellpadding] td {
    padding: 8px 14px !important;
    font-size: 12px;
    color: #374151;
    border: none !important;
}

/* ── User Profile page ──────────────────────────────────────────────── */

/* Page title — styled as a flexigrid/ftitle header bar */
#center h4 {
    background: #1b2a4a !important;
    color: #f1f5f9 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 0 0 0 !important;
}

#center h4 span[style*="color:#800000"],
#center h4 span {
    color: #f1f5f9 !important;
}

#center h4 img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.85 !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* Profile table */
table#userProfileTable {
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    width: 95% !important;
    max-width: 800px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

table#userProfileTable td {
    background-color: #f8fafc !important;
    padding: 6px 20px !important;
    border-bottom: 1px solid #f0f4f9 !important;
    color: #374151 !important;
}

/* Section headers */
table#userProfileTable td[colspan="2"] > div[style*="color:#800000"],
table#userProfileTable td[colspan="2"][style*="color:#800000"] {
    color: #1b2a4a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
}

/* Hint / secondary text in maroon */
table#userProfileTable div[style*="color:#800000"],
table#userProfileTable td[style*="color:#800000"] {
    color: #4b5563 !important;
}

/* Warning / re-enter email rows */
table#userProfileTable tr td[style*="background-color:#FFF7D2"],
table#userProfileTable tr td.yellow {
    background-color: #fffbeb !important;
    border-left: 3px solid #f59e0b !important;
}

/* Form inputs */
table#userProfileTable .x-form-text.x-form-field,
table#userProfileTable select.x-form-text.x-form-field {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    color: #374151 !important;
    background: #ffffff !important;
}

table#userProfileTable .x-form-text.x-form-field:focus {
    border-color: #1b2a4a !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(27, 42, 74, 0.12) !important;
}

/* Primary save buttons */
table#userProfileTable .jqbutton {
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(27, 42, 74, 0.2) !important;
    transition: opacity 0.15s ease !important;
}

table#userProfileTable .jqbutton:hover {
    opacity: 0.88 !important;
}

/* Secondary / medium buttons */
table#userProfileTable .jqbuttonmed {
    background: #ffffff !important;
    color: #1b2a4a !important;
    border: 1px solid #c5cde0 !important;
    border-radius: 6px !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

table#userProfileTable .jqbuttonmed:hover {
    background: #f0f4f9 !important;
    border-color: #1b2a4a !important;
}

/* ─────────────────────────────────────────────
   ONLINE DESIGNER PAGE
   Full width, consistent button styling
   ───────────────────────────────────────────── */

/* Detect online designer via page variable or #forms_surveys */
body:has(#forms_surveys) #center {
    margin: 20px !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Main content width */
body:has(#forms_surveys) #center > div[style*='max-width'] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Instructions paragraph */
body:has(#forms_surveys) #center p[style*='max-width'] {
    max-width: 100% !important;
    color: #374151;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px !important;
}

/* Forms/Surveys flexigrid table - full width */
#forms_surveys {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
}

/* Header bar */
#forms_surveys .mDiv {
    background: #1b2a4a !important;
    border: none !important;
    padding: 0 !important;
}

#forms_surveys .ftitle {
    background: #1b2a4a !important;
    color: #f1f5f9 !important;
    padding: 16px 20px !important;
    border: none !important;
}

#forms_surveys .ftitle .clearfix {
    color: #f1f5f9 !important;
}

#forms_surveys .ftitle .fs15,
#forms_surveys .ftitle .font-weight-bold {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Dividers in ftitle */
#forms_surveys .ftitle .float-start[style*='border-right'] {
    border-right-color: rgba(255, 255, 255, 0.15) !important;
}

#forms_surveys .ftitle [style*='border-top'] {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* Create/Import/Upload buttons in ftitle */
#forms_surveys .ftitle .btn-defaultrc {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e8edf5 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

#forms_surveys .ftitle .btn-defaultrc:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

#forms_surveys .ftitle .btn-defaultrc .text-successrc {
    color: #6ee7b7 !important;
}

#forms_surveys .ftitle .btn-defaultrc i[class*="fa-file-import"] {
    color: #60a5fa !important;
}

#forms_surveys .ftitle .btn-defaultrc i[class*="fa-upload"] {
    color: #fbbf24 !important;
}

/* Form options section */
#forms_surveys .ftitle .boldish {
    color: #c4d0e8 !important;
}

/* Form option buttons */
#forms_surveys .ftitle .btn-defaultrc[style*="0f7b0f"],
#forms_surveys .ftitle .btn-defaultrc[style*="800000"],
#forms_surveys .ftitle .btn-defaultrc[style*="a00000"] {
    color: #e8edf5 !important;
}

#forms_surveys .ftitle .btn-defaultrc .button-checked {
    color: #6ee7b7 !important;
}

/* Links in ftitle */
#forms_surveys .ftitle a {
    color: #93c5fd !important;
}

#forms_surveys .ftitle a:hover {
    color: #ffffff !important;
}

/* Column headers */
#forms_surveys .hDiv {
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

#forms_surveys .hDiv table th {
    background: transparent !important;
    border: none !important;
    padding: 10px 8px !important;
}

#forms_surveys .hDiv table th div {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Table body */
#forms_surveys .bDiv {
    background: #ffffff !important;
}

#forms_surveys .bDiv table {
    width: 100% !important;
}

#forms_surveys .bDiv table tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background 0.12s ease !important;
}

#forms_surveys .bDiv table tr:hover {
    background: #f8fafc !important;
}

#forms_surveys .bDiv table td {
    padding: 12px 8px !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Column widths - make Instrument name expand */
#forms_surveys .bDiv table td div[style*='width:590px'],
#forms_surveys .hDiv table th div[style*='width:590px'] {
    width: auto !important;
    min-width: 300px !important;
    flex: 1 !important;
}

/* Instrument name link */
#forms_surveys .bDiv .formLink {
    color: #1b2a4a !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

#forms_surveys .bDiv .formLink:hover {
    color: #d97059 !important;
}

/* Edit icon */
#forms_surveys .bDiv .instrEdtIcon i {
    color: #d97059 !important;
}

/* Field count */
#forms_surveys .bDiv .fc {
    color: #64748b !important;
    font-size: 13px !important;
}

/* PDF icon */
#forms_surveys .bDiv .pdficon {
    color: #dc2626 !important;
    font-size: 16px !important;
}

/* Choose action button */
#forms_surveys .formActionDropdownTrigger {
    background: #f0f4f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    color: #374151 !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    transition: all 0.15s ease !important;
}

#forms_surveys .formActionDropdownTrigger:hover {
    background: #e8edf5 !important;
    border-color: #c4d0e8 !important;
    color: #1b2a4a !important;
}

/* Action dropdown menu */
#formActionDropdownDiv {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 6px 0 !important;
}

#formActionDropdown {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#formActionDropdown li {
    margin: 0 !important;
    padding: 0 !important;
}

#formActionDropdown li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    color: #374151 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: background 0.12s ease !important;
}

#formActionDropdown li a:hover {
    background: #f0f4f9 !important;
}

#formActionDropdown li a img {
    width: 16px !important;
    height: 16px !important;
}

/* General button styling for Online Designer */
body:has(#forms_surveys) .btn-defaultrc {
    background: #f8fafc !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    color: #374151 !important;
    font-size: 12px !important;
    transition: all 0.15s ease !important;
}

body:has(#forms_surveys) .btn-defaultrc:hover {
    background: #e8edf5 !important;
    border-color: #94a3b8 !important;
    color: #1b2a4a !important;
}

body:has(#forms_surveys) .btn-primaryrc,
body:has(#forms_surveys) .btn-success {
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 4px rgba(27, 42, 74, 0.22) !important;
}

body:has(#forms_surveys) .btn-primaryrc:hover,
body:has(#forms_surveys) .btn-success:hover {
    opacity: 0.88 !important;
    box-shadow: 0 4px 12px rgba(27, 42, 74, 0.32) !important;
}

/* Dialog boxes */
body:has(#forms_surveys) .simpleDialog {
    border-radius: 10px !important;
}

body:has(#forms_surveys) .ui-dialog-titlebar {
    background: #1b2a4a !important;
    color: #f1f5f9 !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 12px 16px !important;
}

body:has(#forms_surveys) .ui-dialog-content {
    padding: 20px !important;
    font-size: 13px !important;
    color: #374151 !important;
}

body:has(#forms_surveys) .ui-dialog-buttonpane {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
}

/* Dropdown menus */
body:has(#forms_surveys) .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 6px 0 !important;
}

body:has(#forms_surveys) .dropdown-item {
    color: #374151 !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
    transition: background 0.12s ease !important;
}

body:has(#forms_surveys) .dropdown-item:hover {
    background: #f0f4f9 !important;
    color: #1b2a4a !important;
}

/* ─────────────────────────────────────────────
   ADMIN HOME PAGE - My Projects List
   Project category icons and styling
   ───────────────────────────────────────────── */

/* Project category icons (injected via project-icons.js) */
.project-category-icon {
    margin-right: 8px !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}

/* Icon colors by category */
.project-category-icon.fa-database {
    color: #1b2a4a !important;
}

.project-category-icon.fa-users {
    color: #0891b2 !important;
}

.project-category-icon.fa-table {
    color: #7c3aed !important;
}

/* Project table styling */
#proj_table {
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

#proj_table .mDiv {
    background: #1b2a4a !important;
    border: none !important;
}

#proj_table .ftitle {
    background: #1b2a4a !important;
    color: #f1f5f9 !important;
    padding: 14px 16px !important;
}

#proj_table .ftitle span[data-rc-lang] {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

#proj_table .ftitle .btn-defaultrc {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e8edf5 !important;
}

#proj_table .ftitle .btn-defaultrc:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

#proj_table .ftitle input.x-form-text {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #f1f5f9 !important;
    border-radius: 6px !important;
}

#proj_table .ftitle input.x-form-text::placeholder {
    color: #94a3b8 !important;
}

/* Column headers */
#proj_table .hDiv {
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

#proj_table .hDiv th div {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Table body */
#proj_table .bDiv {
    background: #ffffff !important;
}

#proj_table .bDiv table tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background 0.12s ease !important;
}

#proj_table .bDiv table tr:hover {
    background: #f8fafc !important;
}

#proj_table .bDiv table td {
    padding: 10px 8px !important;
    vertical-align: middle !important;
}

/* Project title links */
#proj_table .projtitle a.aGrid {
    color: #1b2a4a !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

#proj_table .projtitle a.aGrid:hover {
    color: #d97059 !important;
}

/* Folder headers */
#proj_table .bDiv tr[id^="f_"] td:first-child .projtitle {
    display: flex;
    align-items: center;
}

/* Mobile list view */
.list-group-item.myprojmitem {
    border-left: 3px solid transparent !important;
    transition: all 0.15s ease !important;
}

.list-group-item.myprojmitem:hover {
    background: #f8fafc !important;
    border-left-color: #d97059 !important;
}

/* ── Folder rows (collapsible sections) ──────────────────────────────── */

/* Folder row parent - clean flat design */
#proj_table .fldrrwparent,
#proj_table tr.nohover td.fldrrwparent {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
    transition: all 0.15s ease !important;
}

#proj_table .fldrrwparent:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e8edf5 100%) !important;
}

/* Folder row text */
#proj_table .fldrrw {
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1b2a4a !important;
    letter-spacing: 0.02em !important;
}

/* Folder count badge */
#proj_table .fldcntnum {
    background: #e8edf5 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    margin-left: 10px !important;
    opacity: 1 !important;
}

/* Hide old toggle images */
#proj_table .fldrrwtoggle img {
    display: none !important;
}

/* Create new toggle icons with CSS */
#proj_table .fldrrwtoggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
    background: #1b2a4a !important;
    border-radius: 6px !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}

#proj_table .fldrrwtoggle:hover {
    background: #253d6e !important;
    transform: scale(1.05) !important;
}

/* Collapsed state - folder icon */
#proj_table .fldrrwtoggle #col_0::after,
#proj_table .fldrrwtoggle #col_1::after,
#proj_table .fldrrwtoggle #col_2::after,
#proj_table .fldrrwtoggle #col_3::after,
#proj_table .fldrrwtoggle #col_4::after,
#proj_table .fldrrwtoggle #col_5::after,
#proj_table .fldrrwtoggle span[id^="col_"]::after {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
    content: '\f07c' !important; /* folder-open */
    color: #ffffff !important;
    font-size: 12px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Expanded state - chevron down */
#proj_table .fldrrwtoggle #exp_0::after,
#proj_table .fldrrwtoggle #exp_1::after,
#proj_table .fldrrwtoggle #exp_2::after,
#proj_table .fldrrwtoggle #exp_3::after,
#proj_table .fldrrwtoggle #exp_4::after,
#proj_table .fldrrwtoggle #exp_5::after,
#proj_table .fldrrwtoggle span[id^="exp_"]::after {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
    content: '\f078' !important; /* chevron-down */
    color: #ffffff !important;
    font-size: 11px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Unorganized folder - different color */
#proj_table tr#fold_0 .fldrrwtoggle {
    background: #64748b !important;
}

#proj_table tr#fold_0 .fldrrwparent {
    background: linear-gradient(135deg, #f1f5f9 0%, #e8edf5 100%) !important;
}

#proj_table tr#fold_0 .fldrrw {
    color: #64748b !important;
}

/* ── Mobile folder rows ──────────────────────────────────────────────── */

.list-group-item[onclick*="toggleFolderCollapse"] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
    color: #1b2a4a !important;
    padding: 12px 16px !important;
}

.list-group-item .fldrrwtogglem img {
    display: none !important;
}

.list-group-item .fldrrwtogglem {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 10px !important;
    background: #1b2a4a !important;
    border-radius: 5px !important;
    position: relative !important;
}

.list-group-item .fldrrwtogglem span[id^="colm_"]::after {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
    content: '\f07c' !important;
    color: #ffffff !important;
    font-size: 11px !important;
}

.list-group-item .fldrrwtogglem span[id^="expm_"]::after {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 900 !important;
    content: '\f078' !important;
    color: #ffffff !important;
    font-size: 10px !important;
}

/* ─────────────────────────────────────────────
   REPORTS & EXPORTS PAGES (report.html, report_maker.html)
   ───────────────────────────────────────────── */

/* Sub-navigation tabs */
#sub-nav {
    margin: 20px 0 30px !important;
    padding: 0 !important;
}

#sub-nav ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 6px !important;
}

#sub-nav ul li {
    margin: 0 !important;
    padding: 0 !important;
}

#sub-nav ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

#sub-nav ul li a:hover {
    background: #e2e8f0 !important;
    color: #1b2a4a !important;
}

#sub-nav ul li.active a {
    background: #1b2a4a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.25) !important;
}

#sub-nav ul li.active a i {
    color: #ffffff !important;
}

#sub-nav ul li a i {
    color: #64748b !important;
    font-size: 12px !important;
    transition: color 0.15s ease !important;
}

#sub-nav ul li a:hover i {
    color: #1b2a4a !important;
}

/* Report name in active tab */
#sub-nav ul li.active a span[style*="font-weight:normal"] {
    font-weight: 400 !important;
    color: #d97059 !important;
}

/* Report loading indicator */

p[style="max-width:920px;margin:5px 0 15px;"]{
    display: none ;
}

#report_load_progress,
#report_load_progress2 {
    padding: 20px !important;
    color: #64748b !important;
    font-size: 15px !important;
}

#report_load_progress span[style*="color:#800000"],
#report_load_progress2 span {
    color: #d97059 !important;
}

/* Report list flexigrid - specific overrides */
#report_list.flexigrid {
    border-radius: 12px !important;
    overflow: hidden !important;
    width: auto!important ;
    margin: 0 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

#report_list .mDiv {
    background: linear-gradient(135deg, #1b2a4a 0%, #243457 100%) !important;
    border: none !important;
    padding: 0 !important;
}

#report_list .mDiv .ftitle {
    padding: 0 !important;
}

#report_list .mDiv .ftitle > div {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
}

/* Report table buttons */
.rprt_btns .jqbuttonmed,
#report_list .jqbuttonmed {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.rprt_btns .jqbuttonmed:hover,
#report_list .jqbuttonmed:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* View Report button - green accent */
.rprt_btns .jqbuttonmed[style*="color:#008000"],
.rprt_btns .jqbuttonmed[style*="color:green"] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.rprt_btns .jqbuttonmed[style*="color:#008000"]:hover,
.rprt_btns .jqbuttonmed[style*="color:green"]:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
}

/* Export Data button - blue accent */
.rprt_btns .jqbuttonmed[style*="color:#000066"] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.rprt_btns .jqbuttonmed[style*="color:#000066"]:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
}

/* Stats & Charts button - peach accent */
.rprt_btns .jqbuttonmed[style*="color:#800000"] {
    background: linear-gradient(135deg, #d97059 0%, #c15a44 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.rprt_btns .jqbuttonmed[style*="color:#800000"]:hover {
    background: linear-gradient(135deg, #e07d68 0%, #d46a52 100%) !important;
    color: #ffffff !important;
}

/* Report table rows */
#table-report_list tr {
    border-bottom: 1px solid #f1f5f9 !important;
}

#table-report_list tr:last-child {
    border-bottom: none !important;
}

#table-report_list tr.erow {
    background: #fafbfc !important;
}

#table-report_list tr:hover {
    background: #f8fafc !important;
}

#table-report_list td {
    padding: 14px 10px !important;
    vertical-align: middle !important;
    color: #374151 !important;
}

#table-report_list td .wrap {
    font-weight: 500 !important;
}

#table-report_list td .wrap b {
    color: #1b2a4a !important;
}

/* Report ID and unique name columns */
#table-report_list td .fc div[style*="color:#777"] {
    color: #94a3b8 !important;
    font-size: 11px !important;
}

/* Selected instruments dropdown */
#export_selected_instruments {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    font-size: 12px !important;
    color: #374151 !important;
}

#export_selected_instruments:focus {
    border-color: #1b2a4a !important;
    box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.1) !important;
    outline: none !important;
}

/* Description text on report page */
#center > p,
.clear + p {
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    padding: 15px 20px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    border-left: 4px solid #1b2a4a !important;
    margin: 20px 0 !important;
}

/* Export format dialog */
#exportFormatDialog {
    padding: 20px !important;
}

#exportFormatDialog fieldset {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 20px !important;
    margin: 15px 0 !important;
}

#exportFormatDialog fieldset legend {
    padding: 4px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1b2a4a !important;
    background: #ffffff !important;
    border-radius: 4px !important;
}

#exportFormatDialog fieldset[style*="background-color:#d9ebf5"] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: #93c5fd !important;
}

#exportFormatDialog fieldset[style*="background-color:#eee"] {
    background: #f8fafc !important;
}

/* Export format radio options */
#export_choices_table td {
    padding: 10px 15px !important;
    border-radius: 6px !important;
    transition: background 0.15s ease !important;
}

#export_choices_table td:hover {
    background: #f1f5f9 !important;
}

#export_choices_table td span[style*="font-weight:bold"] {
    font-weight: 600 !important;
    color: #1b2a4a !important;
}

/* Report parent div - the actual report content */
#report_parent_div {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    margin-top: 0px !important;
}

/* Report table styling */
#report_parent_div table {
    width: 100% !important;
    border-collapse: collapse !important;
}

#report_parent_div table th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 14px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-align: left !important;
}

#report_parent_div table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #374151 !important;
    font-size: 13px !important;
}

#report_parent_div table tr:hover td {
    background: #f8fafc !important;
}

/* Report pagination */
.report_pagenum_div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 15px 0 !important;
}

.report_pagenum_div a,
.report_pagenum_div span {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.report_pagenum_div a {
    background: #f1f5f9 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.report_pagenum_div a:hover {
    background: #e2e8f0 !important;
    color: #1b2a4a !important;
}

.report_pagenum_div span.current_page {
    background: #1b2a4a !important;
    color: #ffffff !important;
}

#user_rights_roles_table_parent{
    margin-bottom: 80px ;
}

.flexigrid div.hDiv table#table-user_rights_roles_table th, 
.flexigrid div.bDiv table#table-user_rights_roles_table td:first-child{
    vertical-align: top !important;
}

#dashboard_container{
    padding: 20px ;
    margin-bottom: 50px;
}

/* ── Report Folders ────────────────────────────────────────────────── */

#report_folders_list .rptfldr {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
    overflow: hidden !important;
}

#report_folders_list .rptfldr_hdr {
    background: linear-gradient(135deg, #f1f5f9 0%, #e8edf5 100%) !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    color: #1b2a4a !important;
    cursor: pointer !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#report_folders_list .rptfldr_hdr:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #dbeafe 100%) !important;
}

/* Simple dialog styling */
.simpleDialog {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

.simpleDialog .ui-dialog-titlebar {
    background: #1b2a4a !important;
    color: #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 14px 20px !important;
}

.simpleDialog .ui-dialog-content {
    padding: 20px !important;
    color: #374151 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/** ------- Dashboard ---------**/

.geo-dashboard { font-family: 'Inter', -apple-system, sans-serif; }
.geo-header { background: linear-gradient(135deg, #1b2a4a 0%, #2d4a6f 100%);
              color: #fff; padding: 30px; border-radius: 16px; margin-bottom: 25px; }
.geo-card { background: #fff; border-radius: 14px; padding: 25px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 20px; }
.geo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.geo-stat { text-align: center; padding: 20px; border-radius: 12px;
            transition: transform 0.2s, box-shadow 0.2s; }
.geo-stat:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }


/** ------- Home page — left column full width ---------**/

#pagecontent .row > .col-12.col-md-6,
#pagecontent .row > .col-11.col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

/** ------- Home page — feature list (right column .well) ---------**/

#pagecontent .col-11.col-md-6 .well.fs12 {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#pagecontent .col-11.col-md-6 .well.fs12 p {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 200px;
    background: #EFEEE0;
    border-left: 4px solid #D27F65;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    box-sizing: border-box;
}

#pagecontent .col-11.col-md-6 .well.fs12 p b {
    color: #2B3256;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

/* Icons injected via project-icons.js addFeatureIcons() */

/* ═══════════════════════════════════════════════
   CONTROL CENTER PAGE
   Scoped via body:has(#control_center_window)
   ═══════════════════════════════════════════════ */

/* Wider layout — admin needs more breathing room than 75% */
body:has(#control_center_window) #pagecontainer {
    max-width: 95% !important;
    padding: 80px 0 80px !important;
}

/* ── Left nav sidebar ────────────────────────── */
#control_center_menu {
    background: #1b2a4a !important;
    min-height: calc(100vh - 56px);
    padding: 8px 0 !important;
    overflow-y: auto;
    max-width: 380px !important;
}

#control_center_menu .cc_menu_header {
    background: transparent;
    color: #7085a8;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 10px 18px 5px;
    margin-top: 6px;
}

#control_center_menu .cc_menu_divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 6px 14px;
}

#control_center_menu .fas, #control_center_menu .far, #control_center_menu .fa{
    color: #fff ; 
}

#control_center_menu .cc_menu_item {
    padding: 5px 10px;
    margin: 1px 8px;
    border-radius: 5px;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

#control_center_menu .cc_menu_item:hover {
    background: rgba(255,255,255,0.07);
}

#control_center_menu .cc_menu_item a {
    color: #b8c9e3 !important;
    font-size: 13px !important;
    font-weight: 400;
    text-decoration: none !important;
    transition: color 0.15s ease;
    flex: 1;
    outline: none;
    cursor: pointer;
    margin-left: 20px ;
}

#control_center_menu a{
    color: #ffffff !important;
}

#control_center_menu .cc_menu_item a:hover {
    color: #ffffff !important;
}

/* Preserve REDCap Plus pink colour */
#control_center_menu .cc_menu_item a[style*="color:#cf357c"] {
    color: #cf357c !important;
}

#control_center_menu .cc_menu_item i,
#control_center_menu .cc_menu_item img {
    color: #ffffff !important;
    font-size: 13px !important;
    width: 16px;
    flex-shrink: 0;
    text-align: left;
}

/* ── Right content area ──────────────────────── */
#control_center_window {
    padding: 24px 32px 80px !important;
}

/* Server info bar — white pill */
#control_center_window > .font-weight-bold.text-right {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 20px !important;
}

#version-numbers {
    background: #f0f4f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 5px !important;
    padding: 3px 10px !important;
    color: #1b2a4a !important;
    font-size: 12px !important;
}

/* Cards — .gray2 becomes a white elevated card */
#control_center_window .gray2 {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.04) !important;
    padding: 20px !important;
    overflow: hidden;
}

/* Card section titles */
#control_center_window .gray2 .fs16.font-weight-bold,
#control_center_window .gray2 .fs14.font-weight-bold {
    color: #1b2a4a !important;
    font-weight: 700 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}

#control_center_window .gray2 .fs16.font-weight-bold i,
#control_center_window .gray2 .fs14.font-weight-bold i {
    color: #d97059;
}

/* Notifications card — flush, bordered header */
#control_center_window .notifications-box {
    padding: 0 !important;
}

#control_center_window .notifications-box > .px-2 {
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}

#control_center_window .notifications-box .fa-info-circle {
    color: #d97059;
    font-size: 16px;
}

/* Upgrade notice — warm amber left-border style */
.redcap-updates {
    background: #fffbeb !important;
    border: none !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 0 6px 6px 0 !important;
    margin: 12px 20px !important;
    padding: 12px 16px !important;
}

/* Stats never submitted — red callout */
#stats_last_submitted {
    background: #fee2e2;
    border-left: 3px solid #ef4444;
    border-radius: 0 6px 6px 0;
    padding: 8px 14px;
    margin-bottom: 14px;
    font-size: 13px;
}

/* Other useful info — subtle row dividers */
#control_center_window .gray2 .ps-1.pb-1 {
    padding: 7px 0 !important;
    border-bottom: 1px solid #f8fafc;
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

#control_center_window .gray2 .ps-1.pb-1:last-child {
    border-bottom: none;
}

#control_center_window .gray2 .ps-1.pb-1 i {
    color: #7085a8;
    width: 18px;
    flex-shrink: 0;
    text-align: center;
}

/* Code values in info cards */
#control_center_window .gray2 code {
    background: #f0f4f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 1px 7px !important;
    font-size: 12px !important;
    color: #1b2a4a !important;
}

/* Inline yellow PHP.INI warning */
#control_center_window .yellow.fs12 {
    background: #fffbeb !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 8px 12px !important;
    color: #92400e !important;
    font-size: 12px !important;
    margin: 8px 0 0 0 !important;
}

/* Stats report buttons */
#report_btn .btn-defaultrc,
#report_btn_alt .btn-defaultrc {
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 7px 14px !important;
    box-shadow: 0 1px 4px rgba(27,42,74,0.22) !important;
    transition: opacity 0.15s ease !important;
}

#report_btn .btn-defaultrc:hover,
#report_btn_alt .btn-defaultrc:hover {
    opacity: 0.88 !important;
}

/* ═══════════════════════════════════════════════
   AUTO-LOGOUT DIALOG  (#redcapAutoLogoutDialog)
   ═══════════════════════════════════════════════ */

.ui-dialog:has(#redcapAutoLogoutDialog) {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 420px !important;
}

/* Title bar */
.ui-dialog:has(#redcapAutoLogoutDialog) .ui-dialog-titlebar {
    background: linear-gradient(135deg, #1b2a4a 0%, #253d6e 100%) !important;
    border: none !important;
    border-bottom: 3px solid #d97059 !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    color: #f1f5f9 !important;
}

.ui-dialog:has(#redcapAutoLogoutDialog) .ui-dialog-title {
    color: #f1f5f9 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.01em;
}

/* Close button */
.ui-dialog:has(#redcapAutoLogoutDialog) .ui-dialog-titlebar-close {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    transition: background 0.15s ease !important;
}

.ui-dialog:has(#redcapAutoLogoutDialog) .ui-dialog-titlebar-close:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.35) !important;
}

.ui-dialog:has(#redcapAutoLogoutDialog) .ui-dialog-titlebar-close .ui-icon {
    filter: brightness(0) invert(1) !important;
}

/* Content area */
#redcapAutoLogoutDialog {
    background: #ffffff !important;
    padding: 0 !important;
}

/* Warning block — swap jQuery UI red for IARC amber */
#redcapAutoLogoutDialog .red {
    background: #fffbeb !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#redcapAutoLogoutDialog .red table {
    margin: 0 !important;
}

#redcapAutoLogoutDialog .red td {
    padding: 20px !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
    color: #78350f !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.5 !important;
}

#redcapAutoLogoutDialog .red td b {
    color: #92400e !important;
    font-weight: 600 !important;
}

/* Session expired icon — warm tint */
#redcapAutoLogoutDialog .red img {
    filter: sepia(1) saturate(3) hue-rotate(10deg) !important;
    width: 36px !important;
    height: 36px !important;
    opacity: 0.85;
}

/* Button pane */
.ui-dialog:has(#redcapAutoLogoutDialog) .ui-dialog-buttonpane {
    background: #f8fafc !important;
    border: none !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 14px 20px !important;
    margin: 0 !important;
}

/* Log In button */
.ui-dialog:has(#redcapAutoLogoutDialog) .ui-dialog-buttonset button {
    background: linear-gradient(135deg, #d97059 0%, #c15a44 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    padding: 8px 22px !important;
    box-shadow: 0 2px 8px rgba(217,112,89,0.35) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.ui-dialog:has(#redcapAutoLogoutDialog) .ui-dialog-buttonset button:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 14px rgba(217,112,89,0.45) !important;
    transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════
   SEND-IT PAGE
   ═══════════════════════════════════════════════ */

body:has(#senditbox) #pagecontainer {
    max-width: 760px !important;
    padding: 80px 0 60px !important;
}

/* Page title and description */
body:has(#senditbox) #pagecontent > div[style*="font-size"] {
    color: #1b2a4a !important;
    font-weight: 700 !important;
}

body:has(#senditbox) #pagecontent > p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    margin: 8px 0 16px !important;
}

/* Main form card */
#senditbox {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-top: 8px;
}

/* Card header bar */
#senditbox fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Form rows */
#senditbox fieldset > div {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 24px !important;
    border-bottom: 1px solid #f1f5f9;
}

#senditbox fieldset > div:last-child {
    border-bottom: none;
    background: #f8fafc;
    padding: 16px 24px !important;
}

/* Labels */
#senditbox .labelrc {
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    min-width: 130px;
    width: 130px !important;
    flex-shrink: 0;
    padding-top: 7px;
}

/* File label */
#lblFile {
    min-width: 130px;
    width: 130px;
}

/* Inputs, selects, textareas — supplement the global x-form rules */
#senditbox input[type=text],
#senditbox input[type=email],
#senditbox select,
#senditbox textarea {
    flex: 1;
    width: 100% !important;
    max-width: 100%;
}

#senditbox textarea#recipients,
#senditbox textarea#message {
    min-height: 80px;
    resize: vertical;
}

/* File input row */
#senditbox .boldish {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

/* Confirmation checkbox row */
#senditbox input[type=checkbox] {
    width: 16px !important;
    height: 16px !important;
    margin-top: 4px;
    accent-color: #1b2a4a;
    cursor: pointer;
}

/* Submit button */
#senditbox input#submit {
    background: linear-gradient(135deg, #d97059 0%, #c15a44 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    padding: 9px 28px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(217,112,89,0.30) !important;
    transition: all 0.15s ease !important;
}

#senditbox input#submit:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 14px rgba(217,112,89,0.42) !important;
    transform: translateY(-1px) !important;
}

/* File-too-big error dialog */
#file-too-big-error {
    font-size: 13px;
    color: #374151;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════
   NEW PROJECT PAGE
   ═══════════════════════════════════════════════ */

body:has(#project_title) #pagecontainer {
    max-width: 900px !important;
    padding: 80px 0 60px !important;
}

/* Outer form table — white card */
body:has(#project_title) #pagecontent > form > table,
body:has(#project_title) #pagecontent > table {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Form rows */
body:has(#project_title) #pagecontent tr {
    border-bottom: 1px solid #f1f5f9;
}

body:has(#project_title) #pagecontent tr:last-child {
    border-bottom: none;
}

/* Label column */
body:has(#project_title) #pagecontent td:first-child {
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 14px 20px 14px 24px !important;
    vertical-align: top;
    width: 220px;
    white-space: nowrap;
}

/* Value column */
body:has(#project_title) #pagecontent td:last-child {
    padding: 12px 24px 12px 8px !important;
    vertical-align: top;
    color: #374151;
    font-size: 13px;
}

/* Section title rows (colspan=2) */
body:has(#project_title) #pagecontent td[colspan="2"] {
    background: #f0f4f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 10px 24px !important;
    border-top: 2px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    width: 100% !important;
}

/* ── Project type wizard steps (.blue sections) ── */
body:has(#project_title) .blue {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    margin: 6px 0 !important;
}

/* Step number headers */
body:has(#project_title) #step1 > b,
body:has(#project_title) #step2 > b,
body:has(#project_title) #step3 > b,
body:has(#project_title) #additional_options > b {
    color: #1b2a4a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: block;
    margin-bottom: 10px;
}

/* Radio/checkbox option rows (.hang) inside steps */
body:has(#project_title) .blue .hang {
    padding: 6px 8px !important;
    border-radius: 5px;
    transition: background 0.15s ease;
    margin: 2px 0;
}

body:has(#project_title) .blue .hang:hover {
    background: #e8edf5 !important;
}

body:has(#project_title) .blue input[type=radio],
body:has(#project_title) .blue input[type=checkbox] {
    accent-color: #1b2a4a;
    cursor: pointer;
}

/* Yellow note boxes inside new-project */
body:has(#project_title) .yellow {
    background: #fffbeb !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 14px !important;
    color: #92400e !important;
    font-size: 12px !important;
    margin: 8px 0 !important;
}

/* Template flexigrid */
body:has(#project_title) #template_projects_list {
    margin: 0 !important;
    width: 100% !important;
}

/* Project creation option radios */
body:has(#project_title) #odm_file_upload {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 10px;
}

/* XML file error */
body:has(#project_title) #odm_file_upload_error {
    background: #fee2e2 !important;
    border-left: 3px solid #ef4444 !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 8px 12px !important;
    color: #991b1b !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* Submit button */
body:has(#project_title) input[type=submit],
body:has(#project_title) button[type=submit] {
    background: linear-gradient(135deg, #d97059 0%, #c15a44 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    padding: 9px 28px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(217,112,89,0.30) !important;
    transition: all 0.15s ease !important;
}

body:has(#project_title) input[type=submit]:hover,
body:has(#project_title) button[type=submit]:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 14px rgba(217,112,89,0.42) !important;
    transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────
   PROFILE PAGE — DAG-per-project block
   ───────────────────────────────────────────── */
#iarc-dag-tr td {
    padding: 0 !important;
}

#iarc-dag-block {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    font-family: 'Inter', sans-serif;
}

.iarc-dag-header {
    background: #2B3256;
    color: #fff;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.iarc-dag-header i {
    font-size: 16px;
    opacity: 0.85;
}

.iarc-dag-count {
    margin-left: auto;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 400;
}

.iarc-dag-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.iarc-dag-table thead th {
    background: #f1f5f9;
    color: #475569;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
}

.iarc-dag-table tbody tr:hover td {
    background: #f8fafc;
}

.iarc-dag-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    vertical-align: middle;
}

.iarc-dag-table tbody tr:last-child td {
    border-bottom: none;
}

.iarc-dag-project {
    color: #1e293b;
    font-weight: 500;
    max-width: 340px;
}

.iarc-dag-chip {
    display: inline-block;
    background: #2B3256;
    color: #EFEEE0;
    padding: 2px 9px;
    border-radius: 4px;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 3px 2px 0;
    letter-spacing: 0.3px;
}

.iarc-dag-none {
    color: #94a3b8;
    font-style: italic;
    font-size: 12px;
}

/* ── Table pager (Controller:index pages) ─────────────────────────────────── */
.ipt-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ipt-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2B3256;
    color: #fff;
    padding: 9px 14px;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    gap: 12px;
}

.ipt-title {
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
}

.ipt-title i { opacity: 0.75; }

.ipt-search-label {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 4px 9px;
    gap: 7px;
    min-width: 200px;
    cursor: text;
}

.ipt-search-label i { opacity: 0.65; font-size: 11px; }

#ipt-search {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 12px;
    width: 100%;
    min-width: 0;
}

#ipt-search::placeholder { color: rgba(255,255,255,0.5); }

.ipt-pagerbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: none;
    padding: 7px 14px;
    border-radius: 0 0 6px 6px;
    font-size: 12px;
    color: #475569;
    flex-wrap: wrap;
    gap: 8px;
}

.ipt-info { white-space: nowrap; }

.ipt-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ipt-btn {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #2B3256;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s;
}

.ipt-btn:hover:not(:disabled) { background: #2B3256; color: #fff; border-color: #2B3256; }
.ipt-btn:disabled { opacity: 0.35; cursor: default; }

.ipt-pages {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    white-space: nowrap;
}

#ipt-page-input {
    width: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    text-align: center;
    color: #1e293b;
}

.ipt-size-label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

#ipt-size {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    color: #1e293b;
    cursor: pointer;
}