/* =========================================================================
   UNDP Hackathon — admin theme
   =========================================================================

   Layered over AdminLTE 3 rather than replacing it, so package updates keep
   working and nothing here relies on !important to win.

   Selectors are scoped to `body` rather than a theme class: the auth layout
   composes its own body classes and ignores the panel's, so anything keyed to
   a custom class silently skips the login screen. This file is only ever
   loaded by AdminLTE's own views, so there is nothing to leak into.

   The intent is institutional rather than decorative: one accent colour used
   sparingly, a clear typographic hierarchy, hairline borders instead of heavy
   shadows, and generous room around content. Restraint is what reads as
   serious; ornament is what reads as cheap.

   Contents
     1. Tokens
     2. Base and typography
     3. Layout — fixed shell, scrolling content
     4. Sidebar
     5. Navbar
     6. Cards
     7. Tables
     8. Forms
     9. Buttons
    10. Badges, alerts, callouts
    11. Stat boxes
    12. Login
    13. Motion
   ========================================================================= */

/* ------------------------------------------------------------------ 1. Tokens */

:root {
    /* UNDP blue, plus the tints and shades needed for states. */
    --undp-blue: #0468b1;
    --undp-blue-600: #035a99;
    --undp-blue-700: #024a7e;
    --undp-blue-050: #eaf3fa;
    --undp-blue-100: #d3e7f5;

    /* Deep neutral for the sidebar. Near-black with a blue cast, so it sits
       beside the accent rather than clashing with it. */
    --undp-navy-900: #0f172a;
    --undp-navy-800: #16203a;
    --undp-navy-700: #1e2a47;

    --undp-ink: #111827;
    --undp-body: #374151;
    --undp-muted: #6b7280;
    --undp-faint: #9ca3af;

    --undp-line: #e5e7eb;
    --undp-line-soft: #f0f1f3;
    --undp-canvas: #f6f7f9;
    --undp-surface: #ffffff;

    --undp-success: #157347;
    --undp-warning: #b45309;
    --undp-danger: #b42318;

    --undp-radius: 10px;
    --undp-radius-sm: 7px;

    /* Two shadows only: one for resting surfaces, one for things that lift. */
    --undp-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --undp-shadow-lift: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);

    --undp-sidebar-w: 260px;
}

/* --------------------------------------------------- 2. Base and typography */

body {
    background: var(--undp-canvas);
    color: var(--undp-body);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body h1,
body h2,
body h3,
body h4,
body h5 {
    color: var(--undp-ink);
    font-weight: 600;
    letter-spacing: -0.011em;
}

body .content-header h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0;
}

body a {
    color: var(--undp-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}

body a:hover {
    color: var(--undp-blue-700);
    text-decoration: none;
}

body code {
    background: var(--undp-blue-050);
    color: var(--undp-blue-700);
    padding: 0.12em 0.4em;
    border-radius: 4px;
    font-size: 0.875em;
}

body .text-muted {
    color: var(--undp-muted) !important;
}

/* ------------------------------- 3. Layout — fixed shell, scrolling content */

/* The sidebar and the top bar stay put; only the content column moves. Fixing
   the shell means the navigation and the page title are always reachable,
   which matters most on the long registration and submission tables. */

body.layout-fixed .main-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--undp-sidebar-w);
    height: 100vh;
    overflow: hidden;
    box-shadow: 1px 0 0 rgba(15, 23, 42, 0.06);
}

body.layout-fixed .main-sidebar .sidebar {
    height: calc(100vh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body .content-wrapper,
body .main-header,
body .main-footer {
    margin-left: var(--undp-sidebar-w);
    transition: margin-left 0.25s ease;
}

body.sidebar-collapse .content-wrapper,
body.sidebar-collapse .main-header,
body.sidebar-collapse .main-footer {
    margin-left: 4.6rem;
}

body .content-wrapper {
    background: var(--undp-canvas);
    min-height: 100vh;
}

body .content-header {
    padding: 1.6rem 1.75rem 0.35rem;
}

body .content {
    padding: 1rem 1.75rem 2.5rem;
}

/* Keep long tables scrolling inside their card rather than pushing the page
   sideways. */
body .table-responsive {
    overflow-x: auto;
}

/* ------------------------------------------------------------- 4. Sidebar */

body .main-sidebar,
body .main-sidebar .sidebar {
    background: var(--undp-navy-900);
}

body .brand-link {
    background: var(--undp-navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.95rem 1.25rem;
    height: 4rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: #fff;
}

body .brand-link:hover {
    color: #fff;
}

body .brand-link .brand-image {
    margin: 0;
    max-height: 30px;
    opacity: 0.95;
    box-shadow: none;
}

body .nav-sidebar {
    padding: 0.6rem 0.65rem 2rem;
}

body .nav-sidebar .nav-header {
    color: var(--undp-faint);
    font-size: 0.685rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 1.25rem 0.85rem 0.45rem;
}

body .nav-sidebar .nav-link {
    color: #c7cedb;
    border-radius: var(--undp-radius-sm);
    padding: 0.56rem 0.85rem;
    margin-bottom: 1px;
    font-size: 0.905rem;
    font-weight: 450;
    position: relative;
    transition: background-color 0.14s ease, color 0.14s ease;
}

body .nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
}

body .nav-sidebar .nav-link .nav-icon {
    color: #8b96ab;
    width: 1.5rem;
    font-size: 0.95rem;
    transition: color 0.14s ease;
}

body .nav-sidebar .nav-link:hover .nav-icon {
    color: #cbd5e1;
}

/* Active item: a solid accent rail rather than a filled block. Reads as
   "you are here" without shouting. */
body .nav-sidebar .nav-link.active,
body .nav-sidebar .nav-link.active:hover {
    background: rgba(4, 104, 177, 0.16);
    color: #fff;
    font-weight: 500;
    box-shadow: none;
}

body .nav-sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.65rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--undp-blue);
}

body .nav-sidebar .nav-link.active .nav-icon {
    color: #5aa9e6;
}

body .nav-treeview .nav-link {
    padding-left: 2.35rem;
    font-size: 0.875rem;
    color: #a9b3c4;
}

body .nav-treeview .nav-link.active::before {
    display: none;
}

body .sidebar::-webkit-scrollbar {
    width: 6px;
}

body .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
}

/* AdminLTE puts .3s transitions on the sidebar's width and margin, and the
   brand's width. Those fire whenever its JavaScript restores the collapsed
   state after load, so the sidebar visibly slides on arrival at every page.
   The brief is that only the content column moves, so the sidebar is pinned:
   it appears already in place, and collapsing it is instant rather than
   theatrical. */
body .main-sidebar,
body .main-sidebar *,
body .brand-link,
body .nav-sidebar,
body .nav-sidebar * {
    animation: none !important;
}

body .main-sidebar,
body .brand-link {
    transition: none !important;
}

/* Hover and focus feedback inside the sidebar is a deliberate response to the
   pointer, not page-load movement, so those keep their colour transitions. */
body .nav-sidebar .nav-link,
body .nav-sidebar .nav-link .nav-icon {
    transition: background-color 0.14s ease, color 0.14s ease !important;
}

/* -------------------------------------------------------------- 5. Navbar */

body .main-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--undp-line);
    box-shadow: none;
    height: 4rem;
    display: flex;
    align-items: center;
}

body .main-header .nav-link {
    color: var(--undp-body);
    height: auto;
}

body .main-header .nav-link:hover {
    color: var(--undp-ink);
}

/* ---------------------------------------------------------------- 6. Cards */

body .card {
    background: var(--undp-surface);
    border: 1px solid var(--undp-line);
    border-radius: var(--undp-radius);
    box-shadow: var(--undp-shadow);
    margin-bottom: 1.4rem;
    overflow: hidden;
}

body .card-header {
    background: transparent;
    border-bottom: 1px solid var(--undp-line-soft);
    padding: 1.05rem 1.35rem;
    min-height: unset;
}

body .card-header .card-title {
    color: var(--undp-ink);
    font-size: 0.985rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 0;
    float: none;
}

body .card-body {
    padding: 1.35rem;
}

body .card-footer {
    background: #fbfbfc;
    border-top: 1px solid var(--undp-line-soft);
    padding: 0.95rem 1.35rem;
}

/* AdminLTE's coloured outline cards, toned down to a single top rule. */
body .card.card-outline {
    border-top: 3px solid var(--undp-line);
}

body .card.card-outline.card-primary { border-top-color: var(--undp-blue); }
body .card.card-outline.card-success { border-top-color: var(--undp-success); }
body .card.card-outline.card-warning { border-top-color: var(--undp-warning); }
body .card.card-outline.card-danger  { border-top-color: var(--undp-danger); }
body .card.card-outline.card-info    { border-top-color: var(--undp-blue); }

/* --------------------------------------------------------------- 7. Tables */

body .table {
    color: var(--undp-body);
    margin-bottom: 0;
}

body .table thead th {
    background: #fbfbfc;
    border-bottom: 1px solid var(--undp-line);
    border-top: 0;
    color: var(--undp-muted);
    font-size: 0.715rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.7rem 1.35rem;
    white-space: nowrap;
}

body .table tbody td {
    border-top: 1px solid var(--undp-line-soft);
    padding: 0.85rem 1.35rem;
    vertical-align: middle;
}

body .table-hover tbody tr {
    transition: background-color 0.12s ease;
}

body .table-hover tbody tr:hover {
    background: var(--undp-blue-050);
}

body .table-sm tbody td,
body .table-sm thead th {
    padding: 0.55rem 1rem;
}

/* ---------------------------------------------------------------- 8. Forms */

body .form-control,
body .custom-select {
    border: 1px solid #d5d9e0;
    border-radius: var(--undp-radius-sm);
    color: var(--undp-ink);
    font-size: 0.9rem;
    height: calc(2.35rem + 2px);
    padding: 0.45rem 0.75rem;
    box-shadow: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

body textarea.form-control {
    height: auto;
    line-height: 1.55;
}

body .form-control:focus,
body .custom-select:focus {
    border-color: var(--undp-blue);
    box-shadow: 0 0 0 3px rgba(4, 104, 177, 0.14);
}

body .form-control::placeholder {
    color: var(--undp-faint);
}

body .form-control.is-invalid {
    border-color: var(--undp-danger);
}

body .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.13);
}

body label {
    color: var(--undp-ink);
    font-size: 0.845rem;
    font-weight: 550;
    margin-bottom: 0.35rem;
}

body .form-text {
    font-size: 0.795rem;
    color: var(--undp-muted);
}

body .form-group {
    margin-bottom: 1.15rem;
}

/* -------------------------------------------------------------- 9. Buttons */

body .btn {
    border-radius: var(--undp-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.002em;
    padding: 0.47rem 1rem;
    box-shadow: none;
    transition: background-color 0.14s ease, border-color 0.14s ease,
        transform 0.08s ease, box-shadow 0.14s ease;
}

body .btn:active {
    transform: translateY(0.5px);
}

body .btn:focus,
body .btn.focus {
    box-shadow: 0 0 0 3px rgba(4, 104, 177, 0.18);
}

body .btn-primary {
    background: var(--undp-blue);
    border-color: var(--undp-blue);
}

body .btn-primary:hover {
    background: var(--undp-blue-600);
    border-color: var(--undp-blue-600);
}

body .btn-default {
    background: #fff;
    border-color: #d5d9e0;
    color: var(--undp-body);
}

body .btn-default:hover {
    background: #f7f8fa;
    border-color: #c3c9d3;
    color: var(--undp-ink);
}

body .btn-success { background: var(--undp-success); border-color: var(--undp-success); }
body .btn-danger  { background: var(--undp-danger);  border-color: var(--undp-danger); }
body .btn-warning { background: var(--undp-warning); border-color: var(--undp-warning); color: #fff; }

body .btn-xs {
    font-size: 0.775rem;
    padding: 0.24rem 0.6rem;
}

body .btn-sm {
    font-size: 0.82rem;
    padding: 0.34rem 0.8rem;
}

body .btn-link {
    color: var(--undp-blue);
    font-weight: 500;
}

/* -------------------------------------------- 10. Badges, alerts, callouts */

body .badge {
    border-radius: 999px;
    font-size: 0.715rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.3em 0.72em;
}

body .badge-success { background: #e7f4ec; color: #10633c; }
body .badge-warning { background: #fdf2e3; color: #8a4a08; }
body .badge-danger  { background: #fdeceb; color: #93231a; }
body .badge-info,
body .badge-primary { background: var(--undp-blue-100); color: var(--undp-blue-700); }
body .badge-secondary { background: #eef0f3; color: #4b5563; }
body .badge-light   { background: #f3f4f6; color: #4b5563; }

body .alert {
    border: 1px solid transparent;
    border-radius: var(--undp-radius);
    box-shadow: none;
    font-size: 0.9rem;
    padding: 0.9rem 1.15rem;
}

body .alert-success { background: #f0f8f3; border-color: #cfe8db; color: #10633c; }
body .alert-warning { background: #fdf6ec; border-color: #f2ddbd; color: #8a4a08; }
body .alert-danger  { background: #fdf2f1; border-color: #f5cfcc; color: #93231a; }
body .alert-info    { background: var(--undp-blue-050); border-color: var(--undp-blue-100); color: var(--undp-blue-700); }

body .callout {
    background: var(--undp-surface);
    border-radius: var(--undp-radius);
    border: 1px solid var(--undp-line);
    border-left-width: 3px;
    box-shadow: var(--undp-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1.4rem;
}

body .callout-warning { border-left-color: var(--undp-warning); }
body .callout-info    { border-left-color: var(--undp-blue); }
body .callout-danger  { border-left-color: var(--undp-danger); }

/* ---------------------------------------------------------- 11. Stat boxes */

/* AdminLTE's small-box is a saturated block of colour. Reworked into a white
   card with a restrained accent, so a dashboard of six does not overwhelm the
   thing the reader actually came for. */
body .small-box {
    background: var(--undp-surface) !important;
    border: 1px solid var(--undp-line);
    border-radius: var(--undp-radius);
    box-shadow: var(--undp-shadow);
    color: var(--undp-body) !important;
    margin-bottom: 1.4rem;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.16s ease, transform 0.16s ease;
}

body .small-box:hover {
    box-shadow: var(--undp-shadow-lift);
    transform: translateY(-1px);
}

body .small-box > .inner {
    padding: 1.15rem 1.3rem;
}

body .small-box h3 {
    color: var(--undp-ink) !important;
    font-size: 1.95rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    margin: 0 0 0.15rem;
}

body .small-box p {
    color: var(--undp-muted) !important;
    font-size: 0.845rem;
    font-weight: 500;
    margin: 0;
}

body .small-box .icon {
    color: rgba(17, 24, 39, 0.07) !important;
    font-size: 3.6rem;
    top: 0.75rem;
    right: 0.9rem;
}

/* A hairline of the status colour, rather than the whole tile. */
body .small-box::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--undp-blue);
}

body .small-box.bg-success::after { background: var(--undp-success); }
body .small-box.bg-warning::after { background: var(--undp-warning); }
body .small-box.bg-danger::after  { background: var(--undp-danger); }
body .small-box.bg-secondary::after { background: #94a3b8; }
body .small-box.bg-info::after    { background: var(--undp-blue); }

body .info-box {
    background: var(--undp-surface);
    border: 1px solid var(--undp-line);
    border-radius: var(--undp-radius);
    box-shadow: var(--undp-shadow);
    min-height: unset;
    padding: 0.35rem;
}

body .info-box .info-box-text {
    color: var(--undp-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

body .info-box .info-box-number {
    color: var(--undp-ink);
    font-size: 1.45rem;
    font-weight: 650;
}

/* ---------------------------------------------------------------- 12. Login */

body.login-page {
    background:
        radial-gradient(1100px 520px at 50% -8%, rgba(4, 104, 177, 0.13), transparent 62%),
        var(--undp-canvas);
    align-items: center;
}

body .login-box {
    width: 400px;
    max-width: 92vw;
}

body .login-logo {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 1.5rem;
}

body .login-logo a {
    color: var(--undp-ink);
}

body .login-page .card {
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.05);
}

body .login-page .card-body {
    padding: 1.9rem 1.85rem;
}

body .login-box-msg {
    color: var(--undp-muted);
    font-size: 0.9rem;
    padding-top: 0;
}

body .login-page .input-group-text {
    background: #fbfbfc;
    border-color: #d5d9e0;
    color: var(--undp-faint);
}

/* ---------------------------------------------------------------- 13. Motion */

/* Only the content column animates. The sidebar and header are fixed
   furniture: re-animating them on every page load would draw the eye away
   from the thing that actually changed. */
@keyframes undp-content-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body .content-wrapper > .content-header,
body .content-wrapper > .content {
    animation: undp-content-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

body .content-wrapper > .content {
    animation-delay: 0.04s;
}

/* Respect a stated preference for less movement. */
@media (prefers-reduced-motion: reduce) {
    body *,
    body *::before,
    body *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
    body .content-wrapper,
    body .main-header,
    body .main-footer {
        margin-left: 0;
    }

    body .content-header,
    body .content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}