@media (max-width: 768px) {

html, body {
    margin: 0;
    padding: 0;
    width: 200%;
    overflow-x: hidden;
    height:80%;
}

/* ===== ZONE 1 (TOP BAR) ===== */
#zone1 {
    display: block;
    width: 100%;
    padding: 3px;
    top:-5px;
}

/* ===== NAVBAR ===== */
#navbar {
    width: 100%;
}

#navbar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#navbar a {
    font-size: 12px;
    padding: 4px 6px;
}

/***********video+magic button dashboard-home**********/
/* Stack button + video cleanly */
.media-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Magic button */
.magic-btn {
    position: relative;   /* IMPORTANT */
    top: 300px;      /* push DOWN */
    left: 20px;    /* move LEFT */
    width: 80%;
    max-width: 300px;
    text-align: center;
}

/* Video container */
.project-presentation-box {
    width: 90%;
    display: flex;
    margin-bottom: -80px;  /* same as top */
    margin-right: 195px;   /* same as left */
}

.project-presentation-box video {
    width: 70%;
    height: auto;
    border-radius: 10px;
}

.footer {
    top: 800px;      /* push DOWN */
    text-align: center;
}
 
/*********dashboard ************/
/* === CENTER KEY ACCESS (SAFE FIX) === */
#access-modal {
    position: fixed !important;   /* anchor to screen */
    top: 20% !important;
    left: 30% !important;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    max-width: 320px;
    bottom: auto !important;
    z-index: 9999;
}

/* ===== ZONE ROW ===== */
#zone-row {
    display: flex;
    flex-direction: column;  /* 🔥 stack on mobile */
    gap: 10px;
    width: 100%;
}

/* ===== ZONE 3 ===== */
#zone3 {
    width: 100%;
    font-size: 0.8rem;
}

/* ===== ZONE 4 ===== */
#zone4 {
    width: 100%;
    left :30px;
}

/* ===== MENU TOGGLE FIX ===== */
#menu-menuContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* ===== FILTER POPUP ===== */
#popup-filter-panel {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 300px;
}

#navbar ul ul {
    display: none;
}

/* Show submenu only when parent is active (hover or JS class) */
#navbar li:hover > ul {
    display: block;
}

#menu-menuContent {
    position: fixed;
    left: 1220px;
    width: 14%;        /* 🔥 1/3 of screen */
    max-width: 250px;  /* optional safety */
    padding: 3px;
    top:80px;
    color:navy;
    z-index: 1000;
}

#popup-filter-panel {
    position: fixed;
    top: 42%;    /* 🔥  120px;    */
    left:67%;    /* 🔥  960px;    */
    transform: translateX(-50%);
    color:navy;
    width: 75%;
    max-width: 250px;
}

.crud-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

 
.crud-block {
    display: flex;
    flex-wrap: wrap;
    align-items: left;
    gap: 10px;
}

.crud-block.crud-personal {
        justify-content: flex-start;  /* prevents weird right alignment */
    }

    .crud-block.crud-personal input {
      width: auto !important;
    }

.crud-block input {
    width: auto;
    max-width: 220px;   /* rectangular shape */
    height: 30px;
    box-sizing: border-box;
}

  
.crud-container input,
.tab-content input {
    width: auto !important;
    max-width: 100px;
    height: 30px;
    box-sizing: border-box;
    background-color: rgb(130, 236, 240);
}

.crud-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
}


.crud-block input {
    display: inline-block !important;
    width: 120px !important;
    height: 30px !important;
    flex: none !important;
}
   
input {
    min-width: 0 !important;
    max-width: 100% !important;
}
 
.crud-container input {
    flex: 1;
}

.crud-container,
.crud-block {
    display: block !important;
}

   html body div#zone4 {
    transform: translateY(-22px) !important;
  }
}