.top-bar-container {
    display: flex;
    justify-content: space-between;
}
.top-bar-container a {
    color: #fff;
    border-radius: 12px;
    border-color: #0A2D64;
    padding: 1rem;
    height: fit-content;
    background-color: #0A2D64;
    margin-right: 3rem;
    transition: all 0.5s ease;
}
.top-bar-container a:hover {
    background: #14807E;
    transform: translateY(-2px);
}
.page-title-container {
    display: flex;
    gap: 2rem;
    align-items: center;
}
.page-title-container img {
    width: 100px;
}
.your-resumes-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.your-resumes-container h4 {
    text-align: center;
}
.guest-notice {
  background: rgba(0,0,0,0.03);
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 0 auto;
}
.resume-container {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.resume-title {
    font-size: 1.3rem;
}
.resume-metadata-container {
    padding: 3rem;
    border: 2px solid #0A2D64;
    border-radius: 30px;
    text-align: center;
    transition: all 0.3s ease;
    width: 400px;
}
.resume-container:last-child {
    margin-bottom: 10rem;
}
.resume-metadata-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.resume-metadata-container .date {
    font-size: 14px;
}
.resume-metadata {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.resume-metadata i {
    font-size: 80px;
    color: #0A2D64;
}
.resume-actions-container {
    justify-content: center;
    display: flex;
    gap: 1.5rem;
}
.resume-actions-container a, .link-button {
    transition: all 0.3s ease;
}
.resume-actions-container a:hover, .link-button:hover {
    transform: translateY(-4px);
    color: #0A2D64;
}
.link-button {
    background: none;
    border: none;
    color: #1CA7A3;
    cursor: pointer;
    padding: 0;
    font: inherit;
    /* margin-top: 0.1rem; */
}
.link-button:hover {
    background: #FAFAFA;
}

/* Modal background */
.modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}

/* Modal box */
.modal-content {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  margin: 0 auto;
}

/* Buttons */
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.confirm-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.cancel-btn {
  background-color: #0a2d64;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.confirm-btn:hover { background-color: #c82333; }
.cancel-btn:hover { background-color: #ced4da; }


/* ===========================================
   SHARED: MIMIC PREVIOUS MOBILE UI
   =========================================== */

.fa-ellipsis-vertical {
    top: 18px;
    right: 6px;
}

.mobile-shift-down {
    margin-top: 60px;
    transition: margin-top 0.2s ease;
}

/* ===========================================
   MOBILE & TABLET (0–1024px)
   =========================================== */
@media (max-width: 1024px) {
    

    /* Hide sidebar */
    .left-sidebar {
        display: none !important;
    }

    /* Main view container padding */
    .main-view-container {
        margin: 0;
        padding: 1.5rem;
        gap: 2rem;
    }

    /* ===========================================
       TOP BAR: STACK INTO SINGLE COLUMN
       =========================================== */
    .top-bar-container {
        margin-top: 1.5rem;
        margin: 0 auto;
    }

    .top-bar-container img {
        width: 120px;
        height: 120px;
    }

    .top-bar-container h3 {
        display: none;
    }

    .top-bar-container a {
        display: none
    }

    /* ===========================================
       "Your Resumes" Header
       =========================================== */
    .your-resumes-container h4 {
        font-size: 1.3rem;
        width: fit-content;
        margin: 2rem auto 1rem auto;
    }

    .your-resumes-container {
        gap: 0;
    }

    /* Flash messages spacing */
    /* .section-flash-container {
        margin: 1rem 0;
        text-align: center;
    } */

    /* ===========================================
       Resume Cards - Mobile Stacking
       =========================================== */
    .resume-container {
        display: flex;
        flex-direction: column;
        gap: 1.3rem;
        margin-top: 1.5rem;
    }

    .resume-metadata-container {
        width: 100%;
        padding: 0;
        border: none;
    }

    .resume-metadata {
        padding: 1.2rem;
        border-radius: 12px;
        background: #F6F8FB;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: relative;
        text-align: center;
    }

    .resume-metadata .in-card-data {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .resume-metadata .resume-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #0A2D64;
    }

    .resume-metadata .resume-role,
    .resume-metadata .date {
        font-size: 0.95rem;
    }

    .resume-metadata i.fa-file {
        display: none;
    }

    /* Resume actions - stack vertically */
    .resume-actions-container {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }

    .resume-actions-container a {
        padding: 0.8rem;
        text-align: center;
        border-radius: 8px;
        font-size: 0.95rem;
        text-decoration: none;
        background-color: white;
        border: 1px solid #ccc;
        color: #0A2D64;
        align-self: normal;
    }

    .resume-metadata-container:hover {
        transform: none;
        box-shadow: none;
    }

    .resume-actions-container a:hover {
        transform: none;
        color: #0A2D64;
    }

    /* ===========================================
       Empty State
       =========================================== */
    .empty-state {
        text-align: center;
        margin-top: 2rem;
    }

    .empty-state img {
        width: 70%;
        max-width: 240px;
    }

    .empty-state h3 {
        font-size: 1.4rem;
        margin-top: 1rem;
    }

    .empty-state p {
        font-size: 1rem;
        margin-top: 0.5rem;
    }

    /* ===========================================
       Mobile Bottom Navigation
       =========================================== */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #0A2D64;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.95rem 1rem;
        z-index: 9999;
        box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.15);
    }

    .mobile-bottom-nav .nav-item {
        flex: 1;
        text-align: center;
        color: white;
        text-decoration: none;
        font-size: 0.88rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 1.7rem;
    }

    .mobile-bottom-nav .nav-item.active-highlight i,
    .mobile-bottom-nav .nav-item.active-highlight span {
        color: #19C3BD;
    }
}

/* ===========================================
   DESKTOP (1025px+)
   Hide mobile-only UI
   =========================================== */
@media (min-width: 1025px) {
    .mobile-user-header,
    #menu-trigger,
    #logout-popup {
        display: none !important;
    }
}

@media (max-width: 480px) {
  .guest-notice {
    max-width: 90%;          /* gives breathing room on small screens */
    font-size: 0.85rem;
    padding: 0.6rem 0.7rem;
    margin: 0 auto;
  }
}