/* =========================================================
   HACKATHON TEAM DASHBOARD
   Redesigned to match the student dashboard design system
   ========================================================= */

/* =========================================================
   GOOGLE FONT
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

    --primary: #4338ca;
    --primary-dark: #362d9e;
    --primary-light: #eeecfb;

    --accent: #f5a524;
    --accent-dark: #c9820f;
    --accent-light: #fff3de;

    --secondary: #1c2140;

    --bg: #f4f6fb;
    --white: #ffffff;

    --text: #14181f;
    --text-dark: #1c2140;
    --text-medium: #596273;
    --text-light: #8890a0;

    --border: #e6e8f0;
    --border-light: #eef0f6;

    --success: #14a463;
    --success-light: #e6f8ef;

    --warning: #b9790a;
    --warning-light: #fff3de;

    --danger: #e0453e;
    --danger-light: #fdeceb;

    --info: #2563eb;
    --info-light: #eaf1ff;

    --shadow-sm:
        0 2px 10px rgba(20, 24, 31, 0.05);

    --shadow:
        0 12px 28px rgba(20, 24, 31, 0.08);

    --shadow-lg:
        0 24px 60px rgba(20, 24, 31, 0.18);

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;

}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'Manrope', 'Segoe UI', sans-serif;

    background: var(--bg);

    color: var(--text);

    min-height: 100vh;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}


/* =========================================================
   BUTTON RESET
   ========================================================= */

button,
input,
textarea,
select {
    font-family: inherit;
}


button {
    outline: none;
}


button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}


/* =========================================================
   TOP NAVBAR
   ========================================================= */

.dashboard-navbar {

    width: 100%;

    min-height: 64px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

    background: var(--white);

    border-bottom: 1px solid var(--border);

    position: relative;

    z-index: 50;

}


.logo {

    color: var(--secondary);

    font-size: 18px;

    font-weight: 800;

}


/* =========================================================
   LOGOUT BUTTON
   ========================================================= */

.logout-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 18px;

    border-radius: var(--radius-sm);

    background: var(--white);

    border: 1px solid var(--border);

    color: var(--text-dark);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;

}


.logout-btn:hover {

    border-color: var(--primary);

    color: var(--primary-dark);

    background: var(--primary-light);

}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.team-layout {

    display: flex;

    width: 100%;

    min-height: calc(100vh - 64px);

}


/* =========================================================
   SIDEBAR
   ========================================================= */

.team-sidebar {

    width: 250px;

    flex: 0 0 250px;

    background: var(--white);

    border-right: 1px solid var(--border);

    padding: 28px 18px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    position: sticky;

    top: 0;

    height: calc(100vh - 64px);

    overflow-y: auto;

}


/* =========================================================
   SIDEBAR BUTTON
   ========================================================= */

.sidebar-btn {

    width: 100%;

    min-height: 48px;

    padding: 12px 15px;

    display: flex;

    align-items: center;

    gap: 9px;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    background: var(--bg);

    color: var(--text-dark);

    text-align: left;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}


.sidebar-btn:hover {

    background: var(--primary-light);

    border-color: #d6d2f5;

    color: var(--primary-dark);

    transform: translateX(2px);

}


.sidebar-btn.active {

    background: var(--primary-light);

    border-color: var(--primary);

    color: var(--primary-dark);

}


/* Disabled */

.sidebar-btn:disabled {

cursor: not-allowed;

background: #f3f4f6;

border-color: #e5e7eb;

/* color: #9ca3af; */

transform: none;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.team-content {

    flex: 1;

    width: 100%;

    min-width: 0;

    padding: 34px 40px 50px;

    animation: dashboardFade 0.25s ease;

}


/* =========================================================
   MAIN PAGE TITLE
   ========================================================= */

.team-content > h1 {

    font-size: 27px;

    line-height: 1.3;

    font-weight: 800;

    color: var(--secondary);

    letter-spacing: -0.3px;

    margin-bottom: 7px;

}


.team-content > h2 {

    font-size: 24px;

    line-height: 1.35;

    font-weight: 800;

    color: var(--secondary);

    margin-bottom: 7px;

}


.team-content > p {

    font-size: 14px;

    color: var(--text-medium);

}


/* =========================================================
   WELCOME / CREATE TEAM FIRST MESSAGE
   ========================================================= */

.team-welcome-card {

    width: 100%;

    background: #ffffff;

    border: 1px solid #e6e8f0;

    border-radius: 20px;

    padding: 30px 32px;

    box-shadow: 0 8px 24px rgba(20, 24, 31, 0.06);

    margin-bottom: 24px;

    position: relative;

    overflow: hidden;

    animation: teamWelcomeFade 0.3s ease;

}


/* Warning accent */

.team-welcome-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 4px;

    height: 100%;

    background: #f5a524;

}


/* Heading */

.team-welcome-card > h2 {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 8px 0;

    color: #1c2140;

    font-family: 'Manrope', 'Segoe UI', sans-serif;

    font-size: 21px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: -0.2px;

}


/* Message text */

.team-welcome-card > p {

    margin: 0;

    max-width: 850px;

    color: #596273;

    font-family: 'Manrope', 'Segoe UI', sans-serif;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 500;

}


/* Hover */

.team-welcome-card:hover {

    border-color: #ddd9f5;

    box-shadow: 0 12px 30px rgba(20, 24, 31, 0.08);

    transform: translateY(-1px);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


/* =========================================================
   WELCOME MESSAGE ANIMATION
   ========================================================= */

@keyframes teamWelcomeFade {

    from {

        opacity: 0;

        transform: translateY(8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   SECTION
   ========================================================= */

.section {

    margin-top: 22px;

}


/* =========================================================
   DASHBOARD HEADER
   ========================================================= */

.dashboard-header-box {

    margin-bottom: 20px;

}


/* =========================================================
   SUMMARY CARDS
   ========================================================= */

.summary-cards {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 16px;

    margin-bottom: 25px;

}


.summary-card {

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 18px;

    box-shadow: var(--shadow-sm);

    text-align: left;

    transition: 0.2s ease;

}


.summary-card:hover {

    border-color: #d6d2f5;

    transform: translateY(-2px);

    box-shadow: var(--shadow);

}


.summary-card h3 {

    font-size: 12px;

    font-weight: 700;

    color: var(--text-light);

    text-transform: uppercase;

    letter-spacing: 0.3px;

    margin-bottom: 6px;

}


.summary-card p {

    font-size: 22px;

    font-weight: 800;

    color: var(--secondary);

}


/* =========================================================
   CARD CONTAINER
   ========================================================= */

.card-container {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(230px, 1fr));

    gap: 16px;

}


/* =========================================================
   TEAM CARD
   ========================================================= */

.team-card {

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 18px;

    box-shadow: var(--shadow-sm);

    transition: 0.2s ease;

}


.team-card:hover {

    border-color: #d6d2f5;

    transform: translateY(-2px);

    box-shadow: var(--shadow);

}


.team-card h3 {

    color: var(--secondary);

    font-size: 16px;

    font-weight: 800;

    margin-bottom: 7px;

}


.team-card p {

    font-size: 13px;

    color: var(--text-medium);

}


/* =========================================================
   INVITATION SECTION
   ========================================================= */

.invite-section {

    width: 100%;

    margin-top: 22px;

}


.invite-title {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    color: var(--secondary);

    font-size: 17px;

    line-height: 1.4;

    font-weight: 800;

}


/* =========================================================
   INVITATION TABLE
   ========================================================= */

.invite-table {

    width: 100%;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}


/* =========================================================
   TABLE ROW
   ========================================================= */

.invite-row {

    display: grid;

    grid-template-columns:
        minmax(150px, 2fr)
        minmax(100px, 1fr)
        minmax(180px, 2fr)
        minmax(120px, 1fr);

    align-items: center;

    min-height: 55px;

    padding: 12px 18px;

    border-bottom: 1px solid var(--border-light);

    color: var(--text-medium);

    font-size: 13px;

    transition: background 0.15s ease;

}


.invite-row:last-child {

    border-bottom: none;

}


.invite-row:not(.invite-header):hover {

    background: #faf9ff;

}


/* =========================================================
   TABLE HEADER
   ========================================================= */

.invite-header {

    min-height: 48px;

    background: var(--bg);

    color: var(--text-dark);

    font-size: 11.5px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    border-bottom: 1px solid var(--border);

}


/* =========================================================
   TEAM / LEADER TEXT
   ========================================================= */

.team-name {

    color: var(--secondary);

    font-size: 14px;

    font-weight: 800;

}


.leader-name {

    color: var(--text-medium);

    font-size: 13px;

}


/* =========================================================
   INVITATION ACTIONS
   ========================================================= */

.invite-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}


.request-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}


/* =========================================================
   TEAM STATUS
   ========================================================= */

.team-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 95px;

    padding: 6px 12px;

    border-radius: var(--radius-lg);

    font-size: 11px;

    line-height: 1.3;

    font-weight: 750;

    border: 1px solid transparent;

    white-space: nowrap;

}


/* =========================================================
   ACCEPTED
   ========================================================= */

.accepted-status {

    background: var(--success-light);

    color: #0e7d4d;

    border-color: #b9e9cf;

}


/* =========================================================
   PENDING
   ========================================================= */

.pending-status {

    background: var(--warning-light);

    color: var(--warning);

    border-color: #f2d9a6;

}


/* =========================================================
   REJECTED
   ========================================================= */

.rejected-status {

    background: var(--danger-light);

    color: var(--danger);

    border-color: #f3c5c2;

}


/* =========================================================
   JOIN BUTTON
   ========================================================= */

.join-btn {

    border: 0;

    background: var(--primary);

    color: #ffffff;

    padding: 8px 16px;

    border-radius: var(--radius-sm);

    cursor: pointer;

    font-size: 12px;

    font-weight: 750;

    transition: 0.2s ease;

}


.join-btn:hover {

    background: var(--primary-dark);

    transform: translateY(-1px);

    box-shadow: 0 6px 14px rgba(67, 56, 202, 0.22);

}


/* =========================================================
   ACCEPT BUTTON
   ========================================================= */

.accept-btn,
.btn-accept {

    border: 0;

    background: var(--success);

    color: #ffffff;

    padding: 7px 14px;

    border-radius: var(--radius-sm);

    cursor: pointer;

    font-size: 12px;

    font-weight: 750;

    transition: 0.2s ease;

}


.accept-btn:hover,
.btn-accept:hover {

    background: #0e7d4d;

    transform: translateY(-1px);

}


/* =========================================================
   REJECT BUTTON
   ========================================================= */

.reject-btn,
.btn-reject {

    border: 1px solid #f3c5c2;

    background: var(--danger-light);

    color: var(--danger);

    padding: 7px 14px;

    border-radius: var(--radius-sm);

    cursor: pointer;

    font-size: 12px;

    font-weight: 750;

    transition: 0.2s ease;

}


.reject-btn:hover,
.btn-reject:hover {

    background: var(--danger);

    border-color: var(--danger);

    color: #ffffff;

    transform: translateY(-1px);

}


/* =========================================================
   PENDING BUTTON
   ========================================================= */

.pending-btn {

    border: 1px solid #e3e5e8;

    background: #f3f4f6;

    color: #6b7280;

    padding: 7px 14px;

    border-radius: var(--radius-sm);

    font-size: 12px;

    font-weight: 700;

    cursor: not-allowed;

}


/* =========================================================
   FINAL TEAM BUTTON
   ========================================================= */

.final-btn {

    border: 1px solid #cbd5e1;

    background: #f1f5f9;

    color: #64748b;

    padding: 7px 14px;

    border-radius: var(--radius-sm);

    font-size: 12px;

    font-weight: 700;

    cursor: not-allowed;

}


/* =========================================================
   PROFILE BUTTON
   ========================================================= */

.profile-btn {

    border: 1px solid var(--border-dark, #d7dce3);

    background: #ffffff;

    color: var(--secondary);

    padding: 7px 13px;

    border-radius: var(--radius-sm);

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

    transition: 0.2s ease;

}


.profile-btn:hover {

    background: var(--primary-light);

    border-color: #d6d2f5;

    color: var(--primary-dark);

}


/* =========================================================
   APPROVAL BUTTON
   ========================================================= */

.approval-box {

    margin-top: 20px;

}


.approval-btn,
#finalSubmitBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 10px 20px;

    border: 0;

    border-radius: var(--radius-sm);

    background: var(--primary);

    color: #ffffff;

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;

    transition: 0.2s ease;

}


.approval-btn:hover,
#finalSubmitBtn:hover:not(:disabled) {

    background: var(--primary-dark);

    transform: translateY(-1px);

    box-shadow: 0 8px 18px rgba(67, 56, 202, 0.24);

}


#finalSubmitBtn:disabled {

    cursor: not-allowed;

    opacity: 0.65;

    transform: none;

    box-shadow: none;

}


#finalSubmitBtn.disabled-btn {

    cursor: not-allowed;

    opacity: 0.65;

}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 12px;

    border-radius: var(--radius-lg);

    font-size: 12px;

    font-weight: 750;

    border: 1px solid transparent;

}


.badge.pending {

    background: var(--warning-light);

    color: var(--warning);

    border-color: #f2d9a6;

}


.badge.approved {

    background: var(--success-light);

    color: #0e7d4d;

    border-color: #b9e9cf;

}


.badge.rejected {

    background: var(--danger-light);

    color: var(--danger);

    border-color: #f3c5c2;

}


/* =========================================================
   ADMIN MESSAGE
   ========================================================= */

.admin-message-box,
.admin-msg-box {

    margin-top: 14px;

    padding: 16px 18px;

    background: var(--info-light);

    border: 1px solid #cddffb;

    border-left: 4px solid var(--info);

    border-radius: var(--radius-sm);

}


.msg-title,
.msg-header {

    color: var(--secondary);

    font-size: 13px;

    font-weight: 800;

    margin-bottom: 6px;

}


.msg-content {

    color: var(--text-medium);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   SEND OFFER MODAL
   ========================================================= */

.send-offer-modal {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(15, 17, 23, 0.55);

    backdrop-filter: blur(5px);

    z-index: 9999;

    overflow-y: auto;

}


/* =========================================================
   SEND OFFER BOX
   ========================================================= */

.send-offer-box {

    width: 100%;

    max-width: 540px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    position: relative;

    padding: 26px;

    background: var(--white);

    color: var(--text);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    animation: modalFade 0.25s ease;

}


.send-offer-box h2 {

    margin-bottom: 20px;

    color: var(--secondary);

    font-size: 20px;

    font-weight: 800;

    display: flex;

    align-items: center;

    gap: 8px;

}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.close-btn {

    position: absolute;

    top: 14px;

    right: 15px;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--bg);

    color: var(--text-medium);

    font-size: 15px;

    cursor: pointer;

    transition: 0.2s ease;

}


.close-btn:hover {

    background: var(--danger-light);

    color: var(--danger);

}


/* =========================================================
   MEMBER ROW
   ========================================================= */

.member-row {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    flex-wrap: wrap;

}


/* =========================================================
   MEMBER INPUT
   ========================================================= */

.member-row input {

    flex: 1 1 220px;

    min-width: 180px;

    padding: 11px 13px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    color: var(--text);

    font-size: 13px;

    outline: none;

    transition: 0.2s ease;

}


.member-row input::placeholder {

    color: var(--text-light);

}


.member-row input:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px var(--primary-light);

}


/* =========================================================
   VERIFY STATUS
   ========================================================= */

.verifyStatus {

    min-width: 110px;

    color: var(--text-medium);

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   REMOVE MEMBER BUTTON
   ========================================================= */

.member-row button {

    padding: 8px 11px;

    border: 1px solid #f3c5c2;

    border-radius: var(--radius-sm);

    background: var(--danger-light);

    color: var(--danger);

    cursor: pointer;

    font-size: 12px;

    font-weight: 700;

    transition: 0.2s ease;

}


.member-row button:hover {

    background: var(--danger);

    border-color: var(--danger);

    color: #ffffff;

}


/* =========================================================
   ADD MEMBER BUTTON
   ========================================================= */

.add-member-btn {

    width: 100%;

    margin-top: 12px;

    padding: 11px;

    border: 1.5px dashed #d6d2f5;

    border-radius: var(--radius-sm);

    background: var(--primary-light);

    color: var(--primary-dark);

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;

    transition: 0.2s ease;

}


.add-member-btn:hover {

    background: #e0defa;

    border-color: var(--primary);

}


/* =========================================================
   SEND OFFER BUTTON
   ========================================================= */

.send-offer-btn {

    width: 100%;

    margin-top: 15px;

    padding: 12px;

    border: 0;

    border-radius: var(--radius-sm);

    background: var(--primary);

    color: #ffffff;

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;

    transition: 0.2s ease;

}


.send-offer-btn:hover {

    background: var(--primary-dark);

}


.send-offer-btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}


/* =========================================================
   OFFER MESSAGE
   ========================================================= */

#offerMessageBox {

    margin-top: 14px;

    font-size: 13px;

}


/* =========================================================
   SENT INVITES LIST
   ========================================================= */

#sentInvitesList {

    margin-top: 10px;

    max-height: 260px;

    overflow-y: auto;

}


/* =========================================================
   PROFILE MODAL
   ========================================================= */

.profile-modal {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(15, 17, 23, 0.55);

    backdrop-filter: blur(5px);

    z-index: 9999;

    overflow-y: auto;

}


/* =========================================================
   PROFILE CARD
   ========================================================= */

.profile-card {

    position: relative;

    width: 100%;

    max-width: 450px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 28px;

    background: var(--white);

    color: var(--text);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    animation: modalFade 0.25s ease;

}


/* =========================================================
   PROFILE HEADER
   ========================================================= */

.profile-header {

    text-align: center;

    padding-bottom: 18px;

    margin-bottom: 18px;

    border-bottom: 1px solid var(--border-light);

}


.profile-img {

    display: block;

    width: 82px;

    height: 82px;

    margin: 0 auto 12px;

    object-fit: cover;

    border-radius: 50%;

    border: 4px solid var(--primary-light);

    box-shadow: 0 3px 12px rgba(20, 24, 31, 0.10);

}


.profile-header h2 {

    color: var(--secondary);

    font-size: 20px;

    font-weight: 800;

    margin-bottom: 3px;

}


.profile-header p {

    color: var(--text-light);

    font-size: 12px;

}


/* =========================================================
   PROFILE BODY
   ========================================================= */

.profile-body {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.profile-body p {

    margin: 0;

    padding: 9px 11px;

    background: var(--bg);

    border-radius: var(--radius-sm);

    color: var(--text-medium);

    font-size: 12px;

    line-height: 1.6;

}


.profile-body p b {

    color: var(--text-dark);

}


/* =========================================================
   SOCIAL LINKS
   ========================================================= */

.social-links {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 8px;

}


.social-links a {

    display: inline-flex;

    align-items: center;

    padding: 7px 11px;

    background: var(--primary-light);

    border: 1px solid #d6d2f5;

    border-radius: var(--radius-sm);

    color: var(--primary-dark);

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: 0.2s ease;

}


.social-links a:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: #ffffff;

}


/* =========================================================
   TOAST MESSAGE
   ========================================================= */

.toast-msg {

    position: fixed;

    right: 22px;

    bottom: 22px;

    max-width: 360px;

    padding: 12px 17px;

    border-radius: var(--radius-sm);

    background: var(--secondary);

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    z-index: 10000;

    box-shadow: var(--shadow);

    opacity: 1;

    transition: opacity 0.3s ease;

}


.toast-msg.success {

    background: var(--success);

}


.toast-msg.error {

    background: var(--danger);

}


/* =========================================================
   GENERAL MESSAGE BOX
   ========================================================= */

.msg-box {

    position: fixed;

    top: 20px;

    right: 20px;

    max-width: 360px;

    padding: 12px 17px;

    border-radius: var(--radius-sm);

    font-size: 13px;

    font-weight: 600;

    z-index: 10000;

    box-shadow: var(--shadow);

}


.msg-box.success {

    background: var(--success);

    color: #ffffff;

}


.msg-box.error {

    background: var(--danger);

    color: #ffffff;

}


/* =========================================================
   TEAM TABLE
   ========================================================= */

.team-table {

    width: 100%;

    margin-top: 18px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow-x: auto;

    box-shadow: var(--shadow-sm);

}


.team-row {

    display: grid;

    grid-template-columns:
        2fr
        1.2fr
        1.7fr
        1.3fr
        0.9fr
        1fr;

    min-width: 750px;

    align-items: center;

    padding: 13px 16px;

    border-bottom: 1px solid var(--border-light);

    color: var(--text-medium);

    font-size: 12px;

}


.team-row:last-child {

    border-bottom: none;

}


.team-row:not(.team-header):hover {

    background: #faf9ff;

}


/* =========================================================
   TEAM TABLE HEADER
   ========================================================= */

.team-header {

    background: var(--bg);

    color: var(--text-dark);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    border-bottom: 1px solid var(--border);

}


/* =========================================================
   TEAM NAME
   ========================================================= */

.team-row .team-name {

    color: var(--secondary);

    font-size: 13px;

    font-weight: 800;

}


/* =========================================================
   SUCCESS / PENDING / REJECTED GENERIC
   ========================================================= */

.success {

    background: var(--success);

    color: #ffffff;

}


.pending {

    background: var(--warning);

    color: #ffffff;

}


.rejected {

    background: var(--danger);

    color: #ffffff;

}


/* =========================================================
   NO DATA / EMPTY CONTENT
   ========================================================= */

.team-welcome-card:empty {

    display: none;

}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.team-sidebar::-webkit-scrollbar,
.team-content::-webkit-scrollbar,
.team-table::-webkit-scrollbar,
.profile-card::-webkit-scrollbar,
.send-offer-box::-webkit-scrollbar {

    width: 6px;

    height: 6px;

}


.team-sidebar::-webkit-scrollbar-track,
.team-content::-webkit-scrollbar-track,
.team-table::-webkit-scrollbar-track,
.profile-card::-webkit-scrollbar-track,
.send-offer-box::-webkit-scrollbar-track {

    background: transparent;

}


.team-sidebar::-webkit-scrollbar-thumb,
.team-content::-webkit-scrollbar-thumb,
.team-table::-webkit-scrollbar-thumb,
.profile-card::-webkit-scrollbar-thumb,
.send-offer-box::-webkit-scrollbar-thumb {

    background: var(--border, #d6dbe3);

    border-radius: 10px;

}


.team-sidebar::-webkit-scrollbar-thumb:hover,
.team-content::-webkit-scrollbar-thumb:hover,
.team-table::-webkit-scrollbar-thumb:hover,
.profile-card::-webkit-scrollbar-thumb:hover,
.send-offer-box::-webkit-scrollbar-thumb:hover {

    background: #b9c0ca;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes dashboardFade {

    from {

        opacity: 0;

        transform: translateY(6px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes modalFade {

    from {

        opacity: 0;

        transform: translateY(12px) scale(0.99);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .team-sidebar {

        width: 210px;

        flex-basis: 210px;

    }


    .team-content {

        padding: 28px;

    }


    .team-content > h1 {

        font-size: 24px;

    }


    .team-row {

        grid-template-columns:
            1.6fr
            1fr
            1.5fr
            1.2fr
            0.8fr
            0.9fr;

    }


    .invite-row {

        grid-template-columns:
            1.5fr
            0.9fr
            1.5fr
            1fr;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 768px) {

    .dashboard-navbar {

        min-height: 58px;

        padding: 0 18px;

    }


    .team-layout {

        flex-direction: column;

    }


    .team-sidebar {

        width: 100%;

        flex: none;

        height: auto;

        position: relative;

        top: auto;

        padding: 12px;

        border-right: none;

        border-bottom: 1px solid var(--border);

        flex-direction: row;

        overflow-x: auto;

        gap: 9px;

    }


    .sidebar-btn {

        width: auto;

        min-width: 145px;

        white-space: nowrap;

        justify-content: center;

        text-align: center;

        font-size: 12px;

        padding: 10px 13px;

    }


    .team-content {

        padding: 22px 18px 35px;

    }


    .team-content > h1 {

        font-size: 22px;

    }


    .team-welcome-card {

        padding: 21px;

    }


    .team-welcome-card > h2 {

        font-size: 19px;

    }


    .invite-table {

        overflow-x: auto;

    }


    .invite-row {

        min-width: 650px;

    }


    .team-table {

        overflow-x: auto;

    }


    .summary-cards {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .team-content {

        padding: 18px 13px 30px;

    }


    .team-welcome-card {

        padding: 18px;

        border-radius: var(--radius);

    }


    .team-welcome-card > h2 {

        font-size: 18px;

    }


    .team-welcome-card > p {

        font-size: 13px;

    }


    .invite-title {

        font-size: 15px;

    }


    .summary-cards {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .summary-card {

        padding: 15px;

    }


    .profile-modal,
    .send-offer-modal {

        padding: 12px;

        align-items: flex-start;

    }


    .profile-card,
    .send-offer-box {

        max-height: calc(100vh - 24px);

        margin-top: 12px;

        padding: 20px;

        border-radius: var(--radius);

    }


    .send-offer-box h2 {

        font-size: 18px;

    }


    .member-row {

        flex-direction: column;

        align-items: stretch;

    }


    .member-row input {

        width: 100%;

        min-width: 0;

    }


    .verifyStatus {

        width: 100%;

    }


    .member-row button {

        width: 100%;

    }


    .send-offer-btn {

        min-height: 44px;

    }


    .toast-msg {

        left: 12px;

        right: 12px;

        bottom: 12px;

        max-width: none;

    }


    .msg-box {

        left: 12px;

        right: 12px;

        top: 12px;

        max-width: none;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .team-content {

        padding: 15px 10px 25px;

    }


    .team-sidebar {

        padding: 9px;

    }


    .sidebar-btn {

        min-width: 130px;

        font-size: 11px;

    }


    .team-content > h1 {

        font-size: 20px;

    }


    .team-welcome-card {

        padding: 15px;

    }


    .profile-card,
    .send-offer-box {

        padding: 17px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: 0.001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.001ms !important;

    }

}

/* =========================================================
   CODEWORD 2.0 - HACKATHON NAVBAR BRAND
   ========================================================= */

.hackathon-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    height: 64px;

    user-select: none;

}


/* =========================================================
   BRAND ICON
   ========================================================= */

.hackathon-brand-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: linear-gradient(
        135deg,
        #4338ca,
        #6366f1
    );

    border-radius: 11px;

    font-size: 19px;

    box-shadow:
        0 5px 14px rgba(67, 56, 202, 0.25);

}


/* =========================================================
   BRAND CONTENT
   ========================================================= */

.hackathon-brand-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1;

}


/* =========================================================
   HACKATHON NAME
   ========================================================= */

.hackathon-name {

    color: #1c2140;

    font-family:
        'Manrope',
        'Segoe UI',
        sans-serif;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: -0.4px;

    line-height: 1.2;

}


/* =========================================================
   HACKATHON SUBTITLE
   ========================================================= */

.hackathon-subtitle {

    margin-top: 4px;

    color: #4338ca;

    font-family:
        'Manrope',
        'Segoe UI',
        sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;

    line-height: 1.2;

}


/* =========================================================
   NAVBAR BRAND HOVER
   ========================================================= */

.hackathon-brand {

    transition:
        transform 0.2s ease;

}

.hackathon-brand:hover {

    transform: translateY(-1px);

}


.hackathon-brand:hover .hackathon-brand-icon {

    box-shadow:
        0 7px 18px rgba(67, 56, 202, 0.30);

    transform: scale(1.03);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .hackathon-brand {

        gap: 10px;

    }

    .hackathon-brand-icon {

        width: 37px;

        height: 37px;

        border-radius: 10px;

        font-size: 17px;

    }

    .hackathon-name {

        font-size: 17px;

    }

    .hackathon-subtitle {

        font-size: 8px;

        letter-spacing: 1.5px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .dashboard-navbar {

        min-height: 58px;

        padding: 0 16px;

    }

    .hackathon-brand {

        gap: 9px;

        height: 58px;

    }

    .hackathon-brand-icon {

        width: 34px;

        height: 34px;

        border-radius: 9px;

        font-size: 16px;

    }

    .hackathon-name {

        font-size: 16px;

    }

    .hackathon-subtitle {

        margin-top: 3px;

        font-size: 7px;

        letter-spacing: 1.3px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .dashboard-navbar {

        padding: 0 12px;

    }

    .hackathon-brand-icon {

        width: 32px;

        height: 32px;

        font-size: 15px;

    }

    .hackathon-name {

        font-size: 15px;

    }

    .hackathon-subtitle {

        font-size: 6.5px;

        letter-spacing: 1px;

    }

}
/* =========================================================
   TEAM MEMBER HEADER
========================================================= */

.team-member-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

    padding: 18px 20px;

    border: 1px solid #e4e7ef;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(30, 35, 50, 0.05);
}


.team-member-heading {
    min-width: 0;
}


.team-member-heading h2 {
    margin: 0;

    color: #25283a;

    font-size: 22px;

    font-weight: 800;
}


.team-member-heading p {
    margin: 7px 0 0;

    color: #70778a;

    font-size: 12px;
}


.team-member-heading strong {
    color: #4f46a5;

    font-weight: 750;
}


/* =========================================================
   EXIT TEAM BUTTON
========================================================= */

.exit-team-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    flex: 0 0 auto;

    min-height: 40px;

    padding: 9px 16px;

    border: 1px solid #efb4b0;

    border-radius: 10px;

    background: #fff5f4;

    color: #b43d36;

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.exit-team-btn:hover:not(:disabled) {
    background: #c43f37;

    border-color: #c43f37;

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(196, 63, 55, 0.20);
}


.exit-team-btn:disabled {
    opacity: 0.65;

    cursor: wait;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .team-member-header {
        flex-direction: column;

        align-items: stretch;

        gap: 14px;
    }


    .exit-team-btn {
        width: 100%;
    }

}
/* =========================================================
   EXIT TEAM CONFIRMATION POPUP
========================================================= */

.exit-team-popup-overlay {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(15, 18, 30, 0.52);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}


.exit-team-popup-overlay.show {
    opacity: 1;

    visibility: visible;
}


.exit-team-popup-overlay.closing {
    opacity: 0;

    visibility: hidden;
}


/* =========================================================
   CONFIRMATION CARD
========================================================= */

.exit-team-popup {
    width: 100%;

    max-width: 430px;

    padding: 30px 30px 26px;

    border: 1px solid #e5e7ef;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(20, 25, 40, 0.22);

    text-align: center;

    transform:
        translateY(15px)
        scale(0.97);

    transition:
        transform 0.2s ease;
}


.exit-team-popup-overlay.show
.exit-team-popup {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   ICON
========================================================= */

.exit-team-popup-icon {
    width: 58px;

    height: 58px;

    margin: 0 auto 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff3f1;

    border: 1px solid #f2cfca;

    color: #c24138;

    font-size: 25px;

    box-shadow:
        0 7px 18px rgba(194, 65, 56, 0.10);
}


/* =========================================================
   CONTENT
========================================================= */

.exit-team-popup-content h3 {
    margin: 0;

    color: #202433;

    font-size: 21px;

    font-weight: 800;

    line-height: 1.35;
}


.exit-team-popup-content p {
    margin: 9px 0 5px;

    color: #42485a;

    font-size: 13px;

    font-weight: 650;

    line-height: 1.55;
}


.exit-team-popup-content span {
    display: block;

    max-width: 350px;

    margin: 0 auto;

    color: #7a8191;

    font-size: 11.5px;

    font-weight: 500;

    line-height: 1.65;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.exit-team-popup-actions {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 24px;
}


.exit-team-popup-actions button {
    min-width: 120px;

    min-height: 40px;

    padding: 9px 16px;

    border-radius: 10px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Cancel */

.exit-team-cancel-btn {
    border: 1px solid #dce0e8;

    background: #f7f8fa;

    color: #50576a;
}


.exit-team-cancel-btn:hover {
    background: #eceef3;

    border-color: #d1d5df;

    transform: translateY(-1px);
}


/* Confirm */

.exit-team-confirm-btn {
    border: 1px solid #c24138;

    background: #c24138;

    color: #ffffff;

    box-shadow:
        0 6px 15px rgba(194, 65, 56, 0.18);
}


.exit-team-confirm-btn:hover {
    background: #a93630;

    border-color: #a93630;

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(194, 65, 56, 0.24);
}


/* =========================================================
   SUCCESS POPUP
========================================================= */

.exit-team-success-popup {
    width: 100%;

    max-width: 390px;

    padding: 32px 28px;

    border-radius: 20px;

    border: 1px solid #d9eadd;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(20, 25, 40, 0.20);

    transform:
        translateY(15px)
        scale(0.97);

    transition:
        transform 0.2s ease;
}


.exit-team-popup-overlay.show
.exit-team-success-popup {
    transform:
        translateY(0)
        scale(1);
}


/* Success icon */

.exit-success-icon {
    width: 58px;

    height: 58px;

    margin: 0 auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eaf8f0;

    border: 1px solid #c5e6d1;

    color: #16834f;

    font-size: 27px;

    font-weight: 900;
}


.exit-team-success-popup h3 {
    margin: 0;

    color: #202433;

    font-size: 19px;

    font-weight: 800;
}


.exit-team-success-popup p {
    margin: 9px 0 4px;

    color: #4d5566;

    font-size: 12.5px;

    font-weight: 650;

    line-height: 1.55;
}


.exit-team-success-popup span {
    color: #7a8191;

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   LOADING SPINNER
========================================================= */

.exit-btn-spinner {
    display: inline-block;

    width: 12px;

    height: 12px;

    margin-right: 5px;

    border: 2px solid rgba(255, 255, 255, 0.4);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
        exitTeamSpin 0.7s linear infinite;
}


@keyframes exitTeamSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 500px) {

    .exit-team-popup {
        padding: 25px 20px 21px;

        border-radius: 17px;
    }


    .exit-team-popup-actions {
        flex-direction: column-reverse;

        width: 100%;
    }


    .exit-team-popup-actions button {
        width: 100%;
    }


    .exit-team-popup-content h3 {
        font-size: 19px;
    }

}
/* =========================================================
   FINAL APPROVED TEAM
========================================================= */

.final-approved-team-box {

    display: flex;

    align-items: center;

    gap: 16px;

    margin: 20px 0;

    padding: 18px 20px;

    background: #fff8ed;

    border: 1px solid #fed7aa;

    border-left: 5px solid #f97316;

    border-radius: 14px;

    box-sizing: border-box;

}


.final-approved-team-icon {

    width: 46px;

    height: 46px;

    min-width: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffedd5;

    border-radius: 12px;

    font-size: 21px;

}


.final-approved-team-content {

    flex: 1;

}


.final-approved-team-content h3 {

    margin: 0 0 5px;

    color: #9a3412;

    font-size: 17px;

    font-weight: 800;

}


.final-approved-team-content p {

    margin: 0;

    color: #7c2d12;

    font-size: 13px;

    line-height: 1.5;

}


.delete-team-btn {

    flex-shrink: 0;

    border: 0;

    padding: 11px 17px;

    border-radius: 9px;

    background: #dc2626;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

}


.delete-team-btn:hover {

    background: #b91c1c;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(220, 38, 38, 0.25);

}


.delete-team-btn:disabled {

    opacity: 0.65;

    cursor: wait;

    transform: none;

}


@media (max-width: 700px) {

    .final-approved-team-box {

        flex-direction: column;

        align-items: stretch;

    }


    .final-approved-team-icon {

        align-self: flex-start;

    }


    .delete-team-btn {

        width: 100%;

    }

}