/* ==========================================================================
   eQRS Premium Theme
   Design tokens + AdminLTE/Bootstrap overrides. Plain CSS, no build step —
   edit this file directly and refresh the browser to see changes.

   Brand blue sampled from public/imgs/nimr_logo.png (~#00a7ef).
   Deep navy-teal derived from that same hue for large surfaces; amber/gold
   used as the premium accent (paired the way ega.go.tz pairs navy + amber).
   ========================================================================== */

:root {
    /* NIMR brand blue, from the logo, and shades derived from it */
    --eqrs-brand-50:  #e7f7fd;
    --eqrs-brand-100: #c6ecfa;
    --eqrs-brand-400: #17abe8;
    --eqrs-brand-500: #0098d1;
    --eqrs-brand-600: #0079a8;
    --eqrs-brand-700: #0a3f5c;
    --eqrs-brand-800: #082f47;
    --eqrs-brand-900: #062132;

    /* Premium accent — warm gold, paired against the brand blue */
    --eqrs-accent: #e7a03c;
    --eqrs-accent-dark: #c98526;
    --eqrs-accent-light: #f7cd85;

    /* Stat-card variant colors (icon chips + accent bars) */
    --eqrs-teal: #0098d1;
    --eqrs-green: #16a34a;
    --eqrs-amber: #e7a03c;
    --eqrs-violet: #7c5cfc;
    --eqrs-red: #e5484d;

    --eqrs-bg-top: #eef4f9;
    --eqrs-bg-bottom: #f6f8fa;
    --eqrs-surface: #ffffff;
    --eqrs-border: #e6ebf1;
    --eqrs-text: #1f2937;
    --eqrs-text-muted: #6b7684;

    --eqrs-radius-lg: 16px;
    --eqrs-radius: 10px;
    --eqrs-radius-sm: 6px;

    --eqrs-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --eqrs-shadow-md: 0 8px 20px rgba(9, 45, 66, 0.09);
    --eqrs-shadow-lg: 0 16px 40px rgba(9, 45, 66, 0.16);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

body,
.wrapper {
    font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--eqrs-text);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.small-box h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.content-header h1 {
    font-size: 1.5rem;
}

.content-header .text-muted {
    font-weight: 400;
    font-size: 0.95rem;
}

.dashboard-divider {
    border: none;
    border-top: 2px dotted var(--eqrs-brand-100);
    margin: 12px 0 4px;
}

/* --------------------------------------------------------------------------
   Layout shell — soft brand-tinted wash instead of flat gray
   -------------------------------------------------------------------------- */

.content-wrapper {
    background: linear-gradient(180deg, var(--eqrs-bg-top) 0%, var(--eqrs-bg-bottom) 320px, var(--eqrs-bg-bottom) 100%);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.main-sidebar {
    background: linear-gradient(195deg, var(--eqrs-brand-700) 0%, var(--eqrs-brand-900) 100%) !important;
    box-shadow: var(--eqrs-shadow-lg);
}

.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background-color: transparent !important;
}

.main-sidebar .brand-text {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff !important;
}

.main-sidebar .user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.main-sidebar .user-panel .info a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.nav-sidebar > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    border-radius: var(--eqrs-radius-sm);
    margin: 2px 8px;
    width: auto;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* This app's sidebar partials (resources/views/vendor/adminlte/partials/sidebar/)
   render a bare `<i class="fas fa-...">` with no `.nav-icon` wrapper class, so
   AdminLTE's own `.nav-icon` spacing rules never apply — target the real markup. */
.nav-sidebar .nav-link > i {
    margin-right: 10px;
}

.nav-sidebar > .nav-item > .nav-link .nav-icon {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.15s ease;
}

.nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.nav-sidebar > .nav-item > .nav-link:hover .nav-icon {
    color: var(--eqrs-accent);
}

.nav-sidebar > .nav-item > .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-left: 3px solid var(--eqrs-accent);
    padding-left: calc(1rem - 3px);
}

.nav-sidebar > .nav-item > .nav-link.active .nav-icon {
    color: var(--eqrs-accent) !important;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--eqrs-radius-sm);
    margin: 1px 8px 1px 20px;
}

/* Long labels (e.g. "Research & Publications", "Project Progress Reports")
   wrap to two lines under AdminLTE's default `white-space: normal` — keep
   them on one line and ellipsize as a safety net instead. */
.nav-sidebar > .nav-item > .nav-link,
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.nav-sidebar .nav-link p {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.87rem;
    /* .nav-link is display:flex (see above), so without this the <p> shrinks to
       its text width instead of filling the row — pulling the floated expand/
       collapse arrow (.right) in tight against the label instead of the row's
       far edge. flex-grow lets it fill the remaining width; min-width:0 keeps
       the ellipsis truncation above actually able to shrink when needed. */
    flex: 1 1 auto;
    min-width: 0;
}

/* The expand/collapse chevron (`<i class="... right">`) is positioned
   absolutely (AdminLTE: `right: 1rem`), completely out of text flow — margin
   on it has no effect relative to the label. Reserve the space instead, so
   long labels like "Research & Publications" ellipsize before reaching it
   rather than running up against it. Scoped to `.has-treeview` items only —
   those are the only ones with a chevron; applying this to every item would
   needlessly truncate plain leaf labels that have no chevron to clear. */
.nav-sidebar .has-treeview > .nav-link p {
    padding-right: 1.75rem;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Top navbar
   -------------------------------------------------------------------------- */

.main-header.navbar {
    background-color: var(--eqrs-surface) !important;
    border-bottom: 1px solid var(--eqrs-border);
    box-shadow: var(--eqrs-shadow-sm);
}

.main-header.navbar .nav-link {
    color: var(--eqrs-text) !important;
}

.main-header .badge.navbar-badge {
    background-color: var(--eqrs-accent) !important;
    color: var(--eqrs-brand-900) !important;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Generic cards
   -------------------------------------------------------------------------- */

.card {
    border: 1px solid var(--eqrs-border);
    border-radius: var(--eqrs-radius-lg);
    box-shadow: var(--eqrs-shadow-sm);
}

.card-header {
    background-color: var(--eqrs-surface);
    border-bottom: 1px solid var(--eqrs-border);
    border-top-left-radius: var(--eqrs-radius-lg) !important;
    border-top-right-radius: var(--eqrs-radius-lg) !important;
}

.card-title {
    font-size: 1.05rem;
}

.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header {
    background: linear-gradient(90deg, var(--eqrs-brand-700), var(--eqrs-brand-600));
    color: #fff;
    border-bottom: none;
}

.card-warning:not(.card-outline) > .card-header {
    background: linear-gradient(90deg, var(--eqrs-accent-dark), var(--eqrs-accent));
    color: #fff;
    border-bottom: none;
}

.card-success:not(.card-outline) > .card-header {
    background: linear-gradient(90deg, #0f7a37, var(--eqrs-green));
    color: #fff;
    border-bottom: none;
}

.card-danger:not(.card-outline) > .card-header {
    background: linear-gradient(90deg, #b8333a, var(--eqrs-red));
    color: #fff;
    border-bottom: none;
}

.card-secondary:not(.card-outline) > .card-header {
    background: linear-gradient(90deg, var(--eqrs-brand-900), var(--eqrs-brand-700));
    color: #fff;
    border-bottom: none;
}

.card-outline.card-primary { border-top: 3px solid var(--eqrs-brand-600); }
.card-outline.card-info { border-top: 3px solid var(--eqrs-teal); }
.card-outline.card-warning { border-top: 3px solid var(--eqrs-amber); }
.card-outline.card-success { border-top: 3px solid var(--eqrs-green); }
.card-outline.card-danger { border-top: 3px solid var(--eqrs-red); }
.card-outline.card-secondary { border-top: 3px solid var(--eqrs-brand-800); }

/* --------------------------------------------------------------------------
   Stat tiles (small-box) — white card + colored icon chip, not a flat block
   -------------------------------------------------------------------------- */

.small-box {
    background: var(--eqrs-surface);
    border: 1px solid var(--eqrs-border);
    border-radius: var(--eqrs-radius-lg);
    box-shadow: var(--eqrs-shadow-sm);
    border-left: 4px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: visible;
}

.small-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--eqrs-shadow-md);
}

.small-box .inner {
    padding: 18px 20px;
}

.small-box h3 {
    color: var(--eqrs-text);
    font-size: 1.9rem;
    margin-bottom: 2px;
}

.small-box p {
    color: var(--eqrs-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.small-box .icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 12px;
    font-size: 1.3rem;
    opacity: 1;
    color: #fff;
}

.small-box .small-box-footer,
.small-box .small-box-footer:link,
.small-box .small-box-footer:visited {
    background: transparent;
    color: var(--eqrs-text-muted) !important;
    border-top: 1px solid var(--eqrs-border);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 8px 20px;
    border-bottom-left-radius: var(--eqrs-radius-lg);
    border-bottom-right-radius: var(--eqrs-radius-lg);
}

.small-box .small-box-footer:hover {
    color: var(--eqrs-brand-600) !important;
    background: var(--eqrs-brand-50);
}

.small-box.bg-info,
.small-box.bg-success,
.small-box.bg-warning,
.small-box.bg-purple,
.small-box.bg-danger {
    background: var(--eqrs-surface) !important;
    color: var(--eqrs-text) !important;
}

.small-box.bg-info { border-left-color: var(--eqrs-teal); }
.small-box.bg-info .icon { background: var(--eqrs-teal); }

.small-box.bg-success { border-left-color: var(--eqrs-green); }
.small-box.bg-success .icon { background: var(--eqrs-green); }

.small-box.bg-warning { border-left-color: var(--eqrs-amber); }
.small-box.bg-warning .icon { background: var(--eqrs-amber); }

.small-box.bg-purple { border-left-color: var(--eqrs-violet); }
.small-box.bg-purple .icon { background: var(--eqrs-violet); }

.small-box.bg-danger { border-left-color: var(--eqrs-red); }
.small-box.bg-danger .icon { background: var(--eqrs-red); }

/* --------------------------------------------------------------------------
   Info boxes (admin / DRCP stat rows)
   -------------------------------------------------------------------------- */

.info-box {
    background: var(--eqrs-surface);
    border-radius: var(--eqrs-radius);
    box-shadow: var(--eqrs-shadow-sm);
    border: 1px solid var(--eqrs-border);
}

.info-box .info-box-icon {
    border-radius: var(--eqrs-radius);
    color: #fff;
}

.info-box .info-box-text,
.info-box .info-box-number {
    color: var(--eqrs-text);
}

.info-box .info-box-more {
    color: var(--eqrs-text-muted);
}

.info-box.bg-info,
.info-box.bg-success,
.info-box.bg-warning,
.info-box.bg-danger,
.info-box.bg-primary {
    background: var(--eqrs-surface) !important;
}

.info-box.bg-info .info-box-icon { background: var(--eqrs-teal); }
.info-box.bg-success .info-box-icon { background: var(--eqrs-green); }
.info-box.bg-warning .info-box-icon { background: var(--eqrs-amber); }
.info-box.bg-danger .info-box-icon { background: var(--eqrs-red); }
.info-box.bg-primary .info-box-icon { background: var(--eqrs-brand-600); }

/* --------------------------------------------------------------------------
   Buttons, badges, forms
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--eqrs-radius-sm);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--eqrs-brand-600);
    border-color: var(--eqrs-brand-600);
}

.btn-primary:hover {
    background-color: var(--eqrs-brand-700);
    border-color: var(--eqrs-brand-700);
}

.btn-info {
    background-color: var(--eqrs-teal);
    border-color: var(--eqrs-teal);
}

.btn-warning {
    background-color: var(--eqrs-accent);
    border-color: var(--eqrs-accent);
    color: var(--eqrs-brand-900);
}

.btn-warning:hover {
    background-color: var(--eqrs-accent-dark);
    border-color: var(--eqrs-accent-dark);
    color: #ffffff;
}

.form-control,
.form-select,
textarea.form-control {
    font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    border-radius: var(--eqrs-radius-sm);
    border-color: var(--eqrs-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--eqrs-brand-400);
    box-shadow: 0 0 0 0.2rem rgba(0, 152, 209, 0.15);
}

/* Select2-rendered dropdowns (Study Area, Main Study, Currency, etc.) render their
   own text span outside `.form-control`, so match the same font explicitly. */
.select2-container .select2-selection__rendered {
    font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
}

/* Checklist multi-select widget (replaces select2-multiple for "pick many" fields
   like Mentorship Area, Collaborating Centres/Institutions, Authors). The checkbox
   list is hidden until the field is focused, then overlays like a dropdown; a
   summary line shows the current picks while it's closed. */
.checklist-wrapper {
    position: relative;
}

.checklist-wrapper .checklist-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.checklist-wrapper:focus-within .checklist-box {
    display: block;
}

.checklist-summary {
    font-size: 0.85rem;
    margin-top: 4px;
}

.btn-success { background-color: var(--eqrs-green); border-color: var(--eqrs-green); }
.btn-success:hover { background-color: #128a3e; border-color: #128a3e; }

.btn-danger { background-color: var(--eqrs-red); border-color: var(--eqrs-red); }
.btn-danger:hover { background-color: #c93338; border-color: #c93338; }

.btn-secondary { background-color: var(--eqrs-brand-800); border-color: var(--eqrs-brand-800); }
.btn-secondary:hover { background-color: var(--eqrs-brand-900); border-color: var(--eqrs-brand-900); }

.btn-outline-primary { color: var(--eqrs-brand-600); border-color: var(--eqrs-brand-600); }
.btn-outline-primary:hover { background-color: var(--eqrs-brand-600); border-color: var(--eqrs-brand-600); }

.btn-outline-info { color: var(--eqrs-teal); border-color: var(--eqrs-teal); }
.btn-outline-info:hover { background-color: var(--eqrs-teal); border-color: var(--eqrs-teal); }

.btn-outline-success { color: var(--eqrs-green); border-color: var(--eqrs-green); }
.btn-outline-success:hover { background-color: var(--eqrs-green); border-color: var(--eqrs-green); }

.btn-outline-warning { color: var(--eqrs-accent-dark); border-color: var(--eqrs-amber); }
.btn-outline-warning:hover { background-color: var(--eqrs-amber); border-color: var(--eqrs-amber); color: #fff; }

.btn-outline-danger { color: var(--eqrs-red); border-color: var(--eqrs-red); }
.btn-outline-danger:hover { background-color: var(--eqrs-red); border-color: var(--eqrs-red); }

/* --------------------------------------------------------------------------
   Badges (status pills used across list pages)
   -------------------------------------------------------------------------- */

.badge-primary, .badge.bg-primary { background-color: var(--eqrs-brand-600) !important; }
.badge-info, .badge.bg-info { background-color: var(--eqrs-teal) !important; }
.badge-success, .badge.bg-success { background-color: var(--eqrs-green) !important; }
.badge-warning, .badge.bg-warning { background-color: var(--eqrs-amber) !important; color: #fff !important; }
.badge-danger, .badge.bg-danger { background-color: var(--eqrs-red) !important; }
.badge-secondary, .badge.bg-secondary { background-color: var(--eqrs-brand-800) !important; }

/* --------------------------------------------------------------------------
   Alerts / flash messages
   -------------------------------------------------------------------------- */

.alert {
    border: none;
    border-left: 4px solid transparent;
    border-radius: var(--eqrs-radius-sm);
}

.alert-success { border-left-color: var(--eqrs-green); background-color: #eafaf0; color: #0f5c2a; }
.alert-danger { border-left-color: var(--eqrs-red); background-color: #fdeceb; color: #8f2328; }
.alert-warning { border-left-color: var(--eqrs-amber); background-color: #fdf3e2; color: #8a5a10; }
.alert-info { border-left-color: var(--eqrs-teal); background-color: #e7f6fc; color: #0a5978; }

/* --------------------------------------------------------------------------
   Tables (index/list pages, incl. DataTables-enhanced tables)
   -------------------------------------------------------------------------- */

.table thead th {
    background-color: var(--eqrs-brand-50);
    color: var(--eqrs-brand-800);
    border-bottom: 2px solid var(--eqrs-brand-100);
    font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 0.86rem;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.table tbody td {
    font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.92rem;
    color: var(--eqrs-text);
}

.table-hover tbody tr:hover {
    background-color: var(--eqrs-brand-50);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--eqrs-radius-sm);
    border: 1px solid var(--eqrs-border);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--eqrs-brand-600) !important;
    border-color: var(--eqrs-brand-600) !important;
    color: #fff !important;
}

.page-item.active .page-link {
    background-color: var(--eqrs-brand-600);
    border-color: var(--eqrs-brand-600);
}

.page-link {
    color: var(--eqrs-brand-600);
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item.active {
    color: var(--eqrs-text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--eqrs-text-muted);
}