/******************************************************************************
*
* Interactive Score Authoring System
* Version 2.0
*
******************************************************************************/


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

* {
    box-sizing: border-box;
}


html,
body {

    margin:0;
    padding:0;

    height:100%;

    font-family:Arial, Helvetica, sans-serif;

    background:#eeeeee;

    color:#222;

}


button {

    cursor:pointer;

}


input {

    width:100%;

    padding:6px;

}





/* ==========================================================
   PAGE
========================================================== */

#page {

    width: 100%;
    padding-bottom: 90px;

}




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


header {

    background:white;

    text-align:center;

    padding:12px;

    border-bottom:1px solid #bbb;

}


header h1 {

    margin:0;

    font-size:28px;

}


header h2 {

    margin:5px 0 0;

    color:#666;

    font-weight:normal;

}





/* ==========================================================
   AUTHOR TOOLBAR
========================================================== */


#authorToolbar {

    display:none;

    padding:10px;

    background:#333;

    gap:10px;

}


body.authorMode #authorToolbar {

    display:flex;

}


#authorToolbar button {

    padding:8px 14px;

}







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


#mainContainer {

    display: flex;

    align-items: flex-start;

    width: 100%;

}




/* ==========================================================
   SCORE AREA
========================================================== */


#scoreContainer {

    position: relative;

    width: 70%;

}



#scoreImage {

    display: block;
    width: 100%;
    height: auto;
}




/* ==========================================================
   GRID
========================================================== */


#gridCanvas {

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    pointer-events:none;

    display:none;

}


body.authorMode #gridCanvas {

    display:block;

}



/* ==========================================================
   HOTSPOT LAYER
========================================================== */


#hotspotLayer {

    position: absolute;

    left: 0;

    top: 0;

    pointer-events: none;

}



/* ==========================================================
   HOTSPOTS
========================================================== */


.hotspot {

    position:absolute;

    border:2px solid rgba(255,0,0,.65);

    background:rgba(255,255,0,.08);

    cursor:pointer;
	
	pointer-events: auto;

}



.hotspot:hover {

    background:rgba(255,255,0,.25);

}




.hotspot.active {

    border:3px solid #0066ff;

    background:rgba(0,100,255,.15);

}



/* ==========================================================
   MEASURE NUMBER
   Appears ABOVE top-left corner
========================================================== */

.measureNumber {
    position: absolute;

    left: 0;
    bottom: 100%;

    margin-bottom: 2px;

    font-size: 20px;
    font-weight: bold;

    line-height: 1;

    color: red;

    white-space: nowrap;

    pointer-events: none;

    z-index: 30;
}



/* ================================================================
   HOTSPOT RESIZE HANDLES
   ================================================================ */

.resizeHandle {
    position: absolute;

    width: 12px;
    height: 12px;

    background: white;
    border: 2px solid red;

    box-sizing: border-box;

    z-index: 100;

    display: none;
	
    touch-action: none;

}


/* Handles appear only on the selected hotspot
   while in Author Mode */

body.authorMode .hotspot.active .resizeHandle {
    display: block;
}


/* ---------------------------------------------------------------
   TOP-CENTER HANDLE
   --------------------------------------------------------------- */

.resizeHandle.n {
    left: 50%;
    top: -6px;

    transform: translateX(-50%);

    cursor: ns-resize;
}


/* ---------------------------------------------------------------
   MIDDLE-RIGHT HANDLE
   --------------------------------------------------------------- */

.resizeHandle.e {
    right: -6px;
    top: 50%;

    transform: translateY(-50%);

    cursor: ew-resize;
}



/* ==========================================================
   COORDINATE DISPLAY
========================================================== */


#coordinateDisplay {

    position:absolute;

    right:15px;

    bottom:15px;

    background:rgba(0,0,0,.75);

    color:white;

    padding:10px;

    border-radius:5px;

    font-family:monospace;

    font-size:13px;

    display:none;

}



body.authorMode #coordinateDisplay {

    display:block;

}





/* ==========================================================
   RIGHT PANEL
========================================================== */

/*---hide ID field--------------*/

#editIDLabel,
#editID {
    display: none;
}

/*---hide Start and End Time fields--------------*/
#startTimeField,
#endTimeField {
    display: none;
}




#sidePanel {

    width:350px;

    background:white;

    border-left:1px solid #bbb;

    overflow-y:auto;

    padding:15px;

}




#sidePanel section {

    margin-bottom:20px;

    border-bottom:1px solid #ddd;

    padding-bottom:15px;

}





#sidePanel h3 {

    margin-top:0;

}



/* ==========================================================
   EDITOR BUTTONS
========================================================== */


#editorSection button {

    width:100%;

    margin-top:8px;

    padding:8px;

}



/* ==========================================================
   KEYBOARD TABLE
========================================================== */


#keyboardSection table {

    width:100%;

    border-collapse:collapse;

}


#keyboardSection td {

    padding:5px;

    border-bottom:1px solid #ddd;

}


#keyboardSection td:first-child {

    width:70px;

    font-weight:bold;

}




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


#statusDisplay {

    background:#222;

    color:white;

    padding:10px;

    border-radius:4px;

}




/* ==========================================================
   HELP OVERLAY/WINDOW
========================================================== */


#helpOverlay {

    display:none;

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.55);

    align-items:center;

    justify-content:center;

    z-index:1000;

}



#helpOverlay.visible {

    display:flex;

}



#helpBox {

    background:white;

    width:400px;

    max-width:90%;

    padding:25px;

    border-radius:10px;

    box-shadow:0 5px 20px black;

}



#helpBox button {

    margin-top:15px;

    padding:8px 20px;

}

#btnHelp {
    display: none;
}


/* ==========================================================
   AUDIO TRANSPORT BAR (FIXED)
========================================================== */



#transportBar {
    position: fixed;

    left: 0;
    bottom: 0;

    width: 100%;

    z-index: 1000;

    box-sizing: border-box;
	
	background-color: #E0E0E0;

    opacity: 1;
}


body.authorMode #transportBar {

    display:block;

}



#transportControls {

    display:flex;
    align-items: center;
    gap:6px;

}



#transportControls button {

    padding:6px 12px;

}



#audioSlider {

    width:100%;

    margin-top:10px;

}



#timeDisplay {

    font-family:monospace;

    margin-top:8px;

}



#timestampDisplay {

     margin-left: 20px;
    white-space: nowrap;

    font-size:14px;

}


/*-------------------------------------------------------*/

/* Transport play/pause button */

#btnPlayPause {
    position: relative;
    width: 36px;
    height: 34px;
    font-size: 0;
	
	border: 1px solid #999;
    border-radius: 4px;
}


/* PLAY */
#btnPlayPause:not(.isPlaying) {
    background: none;
}

#btnPlayPause:not(.isPlaying)::before {
    content: "";

    position: absolute;

    left: 13px;
    top: 11px;

    width: 0;
    height: 0;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid black;
}


/* PAUSE */
#btnPlayPause.isPlaying {
    background: none;
}

#btnPlayPause.isPlaying::before,
#btnPlayPause.isPlaying::after {
    content: "";

    position: absolute;

    top: 11px;

    width: 3px;
    height: 12px;

    background: black;

    border: none;
}


/* Left bar */
#btnPlayPause.isPlaying::before {
    left: 12px;
}


/* Right bar */
#btnPlayPause.isPlaying::after {
    left: 20px;
}


/* Speed drop menu */

#speedControl {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 20px;
	white-space: nowrap;
}

/* ==========================================================
   STUDENT MODE
========================================================== */


body:not(.authorMode) #coordinateDisplay {

    display:none;

}


/* ================================================================
   STUDENT MODE — HIDE AUTHORING PANEL
   ================================================================ */

body:not(.authorMode) #authoringPanel {
    display: none;
}

body:not(.authorMode) #authoringControls {
    display: none;
}
/* ================================================================
   STUDENT MODE — INFORMATION PANEL
   ================================================================ */

body:not(.authorMode) #infoPanel {
    display: block;
}

body.authorMode #authoringControls {
    display: block;
}
/* ==========================================================
   MOBILE
========================================================== */


@media screen and (max-width: 768px) {

    #mainContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }


    #scoreContainer {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #scoreImage {
        display: block;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
    }


    #sidePanel {
        position: static !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 15px;

        box-sizing: border-box;

        border-left: none;
        border-top: 1px solid #bbb;

        overflow-y: visible;
    }
	
    #transportBar {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        padding: 6px;
    }

    #transportControls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        width: 100%;
    }


    /* First row: transport buttons */
    #btnRewind,
    #btnBack,
    #btnPlayPause,
    #btnForward,
    #btnFastForward {
        flex: 0 0 auto;
    }


    /* Force timestamp display onto second row */
    #timestampDisplay {
        order: 10;
        flex: 0 0 auto;

        margin-left: 0;
        margin-top: 4px;

        font-size: 11px;
        white-space: nowrap;
    }


    /* Speed control also on second row */
    #speedControl {
        order: 11;
        flex: 0 0 auto;

        margin-left: 12px;
        margin-top: 4px;

        white-space: nowrap;
    }


    /* This forces a line break before timestampDisplay */
    #timestampDisplay::before {
        content: "";
    }


    #transportControls::after {
        content: "";
        flex-basis: 100%;
        width: 0;
        order: 9;
    }


}