:root {
    --navbar-height: 150px;
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --primary-gradient: linear-gradient(135deg, #016E77 0%, #33C1B1 100%);
    --reverse-gradient: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    --text-dark: #2d3748;
    --text-light: #718096;
    --danger-color: #e53e3e;
    --light-bg: #f0f2ff;
    --hover-bg: #e8ebff;
    --white-alpha-10: rgba(255, 255, 255, 0.1);
    --white-alpha-15: rgba(255, 255, 255, 0.15);
    --white-alpha-20: rgba(255, 255, 255, 0.2);
    --nsr-alpha-20: color-mix(in srgb, var(--nsr-color) 20%, transparent);
    --white-alpha-30: rgba(255, 255, 255, 0.3);
    --black-alpha-20: rgba(0, 0, 0, 0.2);
    --black-alpha-30: rgba(0, 0, 0, 0.3);
    --nsr-color: #62e5c9;
}
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
h3,h2,h1
{
  color:var(--primary-color)
}
h4, h5, h5 {
    color: var(--secondary-color)
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.textarea-tall {
    min-height: 250px;
    resize: vertical; /* Allow user to resize if desired */
}
 

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.vertically-centered-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:100%; /* Ensures it takes up at least the full height of its parent (main) */
    padding-top: 90px; /* Optional: Add some padding to prevent it from touching the top */
    padding-bottom: 20px; /* Optional: Add some padding to prevent it from touching the bottom */
}
/*Bootstrap overrides */

.form-control:focus, .form-select:focus {
    border-color: #28a745; /* Bootstrap's standard green */
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25); /* Green glow with transparency */
}
input[type="file"].form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .dropdown-toggle {
    color: rgba(255, 255, 255, 0.75); /* Match your other nav items' normal state */
}

    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .dropdown-toggle:hover,
    .navbar-dark .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-nav .dropdown-toggle:focus {
        color: #fff; /* Bright white on hover/focus for consistency */
    }
.dropdown-menu {
    /*background-color: var(--primary-color);*/ /* Bootstrap green (bg-success) */
}

    .dropdown-menu .dropdown-item {
        /*color: #fff;*/
    }

        .dropdown-menu .dropdown-item:hover,
        .dropdown-menu .dropdown-item:focus {
            /*background-color: #145c32;*/ /* darker green for hover */
            /*color: #fff;*/
        }
/* Custom container widths */
/* Base: mobile first */
.x-container-wide {
    width: 100%; /* Always full width up to the max */
    
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-left: auto; /* center horizontally */
    margin-right: auto;
}

 
@media (min-width: 768px) {
    .x-container-wide {
        max-width: 900px;
        padding-right: 2rem;
        padding-left: 2rem;
    }
}
 
@media (min-width: 992px) {
    .x-container-wide {
        max-width: 1300px;
        padding-right: 2.5rem;
        padding-left: 2.5rem;
    }
}
 
@media (min-width: 1200px) {
    .x-container-wide {
        max-width: 1400px;
        padding-right: 3rem;
        padding-left: 3rem;
    }
}
 
@media (min-width: 1400px) {
    .x-container-wide {
        max-width: 1700px;
        padding-right: 4rem;
        padding-left: 4rem;
    }
}
.status-badge-New {
    background-color: #6c757d;
    color: white;
}

.status-badge-Screening {
    background-color: #ffc107;
    color: black;
}

.status-badge-Shortlisted {
    background-color: #0dcaf0;
    color: black;
}

.status-badge-Selected {
    background-color: #0d6efd;
    color: white;
}

.status-badge-Offer_Accepted {
    background-color: #198754;
    color: white;
}

.status-badge-Joined {
    background-color: #212529;
    color: white;
}


.status-badge-Open {
    background-color: #d4edda; /* soft green */
    color: #155724; /* dark green text */
    border: 1px solid #c3e6cb;
}

.status-badge-Process {
    background-color: #fff3cd; /* light amber */
    color: #856404; /* darker amber text */
    border: 1px solid #ffeeba;
}

.status-badge-Appointed {
    background-color: #d1ecf1; /* light teal/blue */
    color: #0c5460; /* dark teal text */
    border: 1px solid #bee5eb;
}

/* Early stage */
.status-badge-SCREENING{
    background-color: #e2e3e5; /* light gray */
    color: #495057;
    border: 1px solid #d6d8db;
}

.status-badge-SHORTLISTED {
    background-color: #cfe2ff; /* soft light blue */
    color: #084298;
    border: 1px solid #b6d4fe;
}

/* Evaluation */
.status-badge-WRITTEN_TEST {
    background-color: #fff3cd; /* light amber */
    color: #856404;
    border: 1px solid #ffeeba;
}

.status-badge-INTERVIEW {
    background-color: #e2d9f3; /* soft lavender */
    color: #3d2671;
    border: 1px solid #d3c2eb;
}

/* Selection / Processing */
.status-badge-SELECTED{
    background-color: #d4edda; /* light green */
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-badge-DOCUMENT_PROCESS {
    background-color: #d1ecf1; /* light teal */
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.status-badge-VISA_ISSUED {
    background-color: #cfe2ff; /* blue */
    color: #084298;
    border: 1px solid #b6d4fe;
}

.status-badge-MEDICAL {
    background-color: #f8d7da; /* pinkish medical tone */
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-badge-VISA_STAMPED{
    background-color: #b2f2bb; /* mint green */
    color: #0f5132;
    border: 1px solid #a3e6ad;
}

/* Travel / Arrival */
.status-badge-TRAVELLING {
    background-color: #ffe5b4; /* peach */
    color: #663c00;
    border: 1px solid #ffd699;
}

.status-badge-ARRIVED{
    background-color: #bae6fd; /* light cyan blue */
    color: #075985;
    border: 1px solid #a5d8f5;
}

.status-badge-JOINED, .status-badge-Completed {
    background-color: #198754; /* bootstrap success deep green */
    color: #fff;
    border: 1px solid #146c43;
}

/* Negative outcome */
.status-badge-REJECTED, .status-badge-Overdue {
    background-color: #f8d7da; /* light red */
    color: #842029;
    border: 1px solid #f5c2c7;
}
 
 
/* Custom Select with Badge Display */
.status-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #dee2e6;
    border-radius: 25px;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;

}
/* Timeline wrapper */
.timeline {
    position: relative;
    margin: 2rem 0;
    padding-left: 2rem;
    border-left: 3px solid #dee2e6;
}

/* Each item */
.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
}

    /* Dot indicator */
    .timeline-item::before {
        content: "";
        position: absolute;
        left: -11px;
        top: 6px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #0d6efd; /* Bootstrap primary */
        border: 2px solid #fff;
        box-shadow: 0 0 0 2px #dee2e6;
    }

/* Timeline content box */
.timeline-content {
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    /* Hover effect */
    .timeline-content:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    }

    /* Status badge inside timeline */
    .timeline-content .badge {
        font-size: 0.75rem;
        padding: 0.4em 0.6em;
        border-radius: 12px;
    }

    /* Date styling */
    .timeline-content small.text-muted {
        font-size: 0.75rem;
    }

    /* Remarks paragraph */
    .timeline-content p {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }