.navbar {
    --bs-navbar-padding-y:0 !important; 
}
 

html {
    font-size: 14px;
}

@font-face {
    font-family: tasbuddyfont;
    src: url(/fonts/Righteous-Regular.ttf);
}


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.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%;
}

body {
  margin-bottom: 60px;
}

.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;
}


.logo {
    font-family: tasbuddyfont;
    /* box-shadow: 0 20px 20px -20px #55534d; */
}

.logo-tas {
    font-size: 48px;
    font-weight: bold;
    color: #afc7c7;
}

.logo-cofee {
    height: 46px !important;
    width: 46px !important;
    background: url('/images/coffee-twotone-loop.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.logo-buddy {
    font-size: 48px;
    font-weight: bold;
    color: #efede2;
}
.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}



/* ... (Previous Styles Kept Same) ... */

/* Added small utility for alignment */
.align-bottom {
    vertical-align: bottom;
}

/* PDF-specific styles */
@media print {
    body {
        font-size: 11pt !important;
        line-height: 1.4;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .card {
        break-inside: avoid;
        border: 1px solid #ddd !important;
        margin-bottom: 15px !important;
    }

    .card-body {
        padding: 15px !important;
    }

    .no-print {
        display: none !important;
    }

    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
    }

    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    /* Restore flex for grid in PDF */
    .col-md-4 {
        width: 33.333% !important;
    }

    .col-md-6 {
        width: 50% !important;
    }

    .badge {
        border: 1px solid #000;
        color: #000 !important;
        background: transparent !important;
    }

    .bg-secondary {
        
    
    }
}

/* Regular styles */
.skill-card {
    transition: all 0.2s ease;
    background: white;
}

    .skill-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

.score-low {
    color: var(--bs-danger);
}

.score-medium {
    color: var(--bs-warning);
}

.score-high {
    color: var(--bs-success);
}

.score-excellent {
    color: var(--bs-primary);
}

.progress-bar-low {
    background-color: #ee583b;
}

.progress-bar-medium {
    background-color: #ff9f00;
}

.progress-bar-high {
    background-color: #4CC790;
}

.progress-bar-excellent {
    background-color: #3c9ee5 /* #3c9ee5  */ /* var(--bs-primary); */
}

.header-shadow {
    box-shadow: 0 5px 5px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24);
}
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #efede2;
}

main {
    flex: 1 0 auto;
}

:root {
    --primary-color: #2c3e50;
    --primary-light: #63a4ff;
    --primary-dark: #004ba0;
    --success-color: #2e7d32;
    --warning-color: #ff9800;
    --error-color: #d32f2f;
    --info-color: #0288d1;
    /*             --primary-color: #0D3B66 !important;
            --primary-light: #63a4ff;
            --primary-dark: #004ba0;
            --success-color: #2e7d32;
            --warning-color: #ff9800;
            --error-color: #d32f2f;
            --info-color: #0288d1; */
}

/*         .bg-primary, .btn-primary,  {
            background-color: #0D3B66 !important;
        } */
body {
    font-family: Segoe UI, 'Roboto', sans-serif;
    background-color: #f8f9fa;
}

.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/*         .card:hover
        {
            transform: translateY(-2px);
                box-shadow: 0 10px 10px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
        }
 */
.btn {
    border-radius: 4px;
    font-weight: 500;
    text-transform: none;
}

.form-control, .form-select {
    border-radius: 4px;
}

.bg-secondary {
    color: white !important;
}

.icon-color {
    /*       color: #3498db !important; */
    color: white !important;
}
/* The 'More...' Link Styling */
details {
    display: inline-block;
    margin-left: 8px;
    position: relative;
}

summary {
    cursor: pointer;
    color: #007bff; /* Link Blue */
    text-decoration: underline;
    font-size: 0.9em;
    list-style: none; /* Hides the default arrow in some browsers */
}

    /* Remove default arrow in Webkit (Chrome/Safari) */
    summary::-webkit-details-marker {
        display: none;
    }

/* The Popup Bubble Styling */
.popup-content {
    display: block;
    position: absolute;
    top: 25px; /* Push it down below the link */
    left: 0;
    width: 250px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 10px;
    border-radius: 5px;
    z-index: 100;
    font-size: 0.9em;
    color: #555;
}

    /* Optional: A small arrow pointing up */
    .popup-content::after {
        content: "";
        position: absolute;
        bottom: 100%; /* At the top of the tooltip */
        left: 15px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #ccc transparent;
    }

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    animation: slideIn 0.3s ease;
}

.modal h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.modal p {
    color: #666;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

    .modal-actions button {
        padding: 0.6rem 1.2rem;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.2s;
    }

.btn-cancel {
    background-color: #f1f1f1;
    color: #666;
}

    .btn-cancel:hover {
        background-color: #e1e1e1;
    }

.btn-confirm {
    background-color: #dc3545;
    color: white;
}

    .btn-confirm:hover {
        background-color: #c82333;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}
/* Add pipes between nav-items on desktop only */
@media (min-width: 992px) {
    .navbar-nav .nav-item:not(:last-child):after {
        content: "|";
        color: #ccc; /* Light gray pipe */
        padding-left: 10px;
        padding-right: 10px;
        display: inline-block;
        vertical-align: middle;
    }

    /* Ensure the form (Logout) behaves like a list item for the pipe */
    .navbar-nav .nav-item {
        display: flex;
        align-items: center;
    }
}

.verysmall
{
    font-size:smaller;
}



/* Custom full-page modal - separate from Bootstrap modals */
.fullpage-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999; /* Higher than Bootstrap modal (which is usually 1050-1060) */
    overflow-y: auto;
}

    .fullpage-modal.show {
        display: block;
    }

    .fullpage-modal .modal-header {
        padding: 1rem;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .fullpage-modal .modal-body {
        padding: 2rem;
    }

/* Ensure Bootstrap modals aren't affected */
.modal-backdrop {
    z-index: 1040 !important; /* Keep Bootstrap backdrop at default */
}


input::placeholder, textarea::placeholder {
    /* Standard syntax for modern browsers */
    color: gray; /* Example color */
    font-size: 14px; /* Example font size */
    font-style: italic; /* Example font style */
    opacity: 1; /* Firefox has a default lower opacity, this ensures consistency */
}