/* ==========================================================
   MORSE CODE TRANSLATOR
========================================================== */

*{

    box-sizing:border-box;

}

/* ==========================================================
   Workspace
========================================================== */

.workspace-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

@media (max-width:900px){

.workspace-grid{

    grid-template-columns:1fr;

}

}

/* ==========================================================
   Main Layout
========================================================== */

.editor-layout{

    display:grid;

    grid-template-columns:1fr 280px 1fr;

    gap:24px;

    align-items:start;

}

@media (max-width:1100px){

    .editor-layout{

        display:flex;
        flex-direction:column;

    }

    .editor-layout > :nth-child(1){

        order:1;   /* Input */

    }

    .editor-layout > :nth-child(2){

        order:2;   /* Options */

    }

    .editor-layout > :nth-child(3){

        order:3;   /* Output */

    }

}

/* ==========================================================
   Hero Cards
========================================================== */

.hero-card{

    position:relative;

}

.output-panel{

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   Titles
========================================================== */

.output-panel h2,
.morse-options h2{

    margin-bottom:18px;

}

/* ==========================================================
   Textareas
========================================================== */

.output-panel textarea{

    width:100%;

    min-height:340px;

    resize:vertical;

    padding:18px;

    border:1px solid #2b2b2b;

    border-radius:10px;

    background:#181818;

    color:#ffffff;

    font-size:15px;

    line-height:1.7;

    font-family:Consolas, Monaco, monospace;

    transition:

        border-color .25s,

        box-shadow .25s,

        background .25s;

}

/* ==========================================================
   Focus
========================================================== */

.output-panel textarea:focus{

    outline:none;

    border-color:#4f46e5;

    box-shadow:

        0 0 0 3px rgba(79,70,229,.18);

}

/* ==========================================================
   Readonly Output
========================================================== */

#outputText{

    background:#151515;

}

/* ==========================================================
   Placeholder
========================================================== */

textarea::placeholder{

    color:#777;

}

/* ==========================================================
   Panel Buttons
========================================================== */

.panel-actions{

    display:flex;

    justify-content:flex-end;

    margin-top:18px;

}

/* ==========================================================
   Hidden Upload
========================================================== */

#fileInput{

    display:none;

}

/* ==========================================================
   Option Panel
========================================================== */

.morse-options{

    display:flex;

    flex-direction:column;

    gap:16px;

    align-self:stretch;

    justify-content:flex-start;

}

/* ==========================================================
   Buttons
========================================================== */

.morse-options .btn{

    width:100%;

}

/* ==========================================================
   Responsive Textareas
========================================================== */

@media (max-width:1100px){

.output-panel textarea{

    min-height:260px;

}

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

.output-panel textarea{

    min-height:220px;

    font-size:14px;

}

.panel-actions{

    justify-content:stretch;

}

.panel-actions .btn{

    width:100%;

}

}

/* ==========================================================
   Scrollbars
========================================================== */

textarea::-webkit-scrollbar{

    width:10px;

    height:10px;

}

textarea::-webkit-scrollbar-track{

    background:#111;

}

textarea::-webkit-scrollbar-thumb{

    background:#3a3a3a;

    border-radius:20px;

}

textarea::-webkit-scrollbar-thumb:hover{

    background:#555;

}

/* ==========================================================
   Selection
========================================================== */

textarea::selection{

    background:#4f46e5;

    color:#ffffff;

}

/* ==========================================================
   Card Animation
========================================================== */

.hero-card{

    animation:fadeIn .35s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   OPTION PANEL
========================================================== */

.morse-options{

    padding:24px;

}

.morse-options h2{

    margin-bottom:10px;

}

/* ==========================================================
   OPTION GROUP
========================================================== */

.option-group{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* ==========================================================
   OPTION CHECKBOX / RADIO
========================================================== */

.option-checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    color:#d7d7d7;

    font-size:15px;

    font-weight:500;

    user-select:none;

    transition:color .25s;

}

.option-checkbox:hover{

    color:#ffffff;

}

.option-checkbox input{

    width:18px;

    height:18px;

    margin:0;

    cursor:pointer;

    accent-color:#4f46e5;

}

.option-checkbox span{

    flex:1;

}

/* ==========================================================
   BUTTON GROUP
========================================================== */

.button-group{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:10px;

}

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

.morse-options .btn{

    width:100%;

    min-height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:15px;

    font-weight:600;

    transition:

        transform .18s,

        box-shadow .18s,

        opacity .18s;

}

.morse-options .btn:hover{

    transform:translateY(-1px);

}

.morse-options .btn:active{

    transform:translateY(1px);

}

.morse-options .btn:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

}

/* ==========================================================
   PRIMARY BUTTON
========================================================== */

#convertBtn{

    margin-top:6px;

}

/* ==========================================================
   SECONDARY BUTTONS
========================================================== */

#swapBtn,
#copyBtn,
#downloadBtn,
#clearBtn{

    margin-top:2px;

}

/* ==========================================================
   FILE BUTTON
========================================================== */

#uploadBtn{

    min-width:170px;

}

/* ==========================================================
   CONTROL DIVIDER
========================================================== */

.control-divider{

    width:100%;

    height:1px;

    background:#2d2d2d;

    margin:8px 0;

}

/* ==========================================================
   LABELS
========================================================== */

.control-label{

    color:#9c9c9c;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

}

/* ==========================================================
   INPUT STATES
========================================================== */

input[type="radio"]:focus-visible,

input[type="checkbox"]:focus-visible{

    outline:2px solid #4f46e5;

    outline-offset:3px;

    border-radius:4px;

}

/* ==========================================================
   BUTTON ICONS
========================================================== */

.btn svg{

    width:18px;

    height:18px;

    flex-shrink:0;

}

/* ==========================================================
   SMALL BUTTON VARIANT
========================================================== */

.btn.small{

    min-height:38px;

    font-size:14px;

    padding:0 14px;

}

/* ==========================================================
   INLINE BUTTON GROUP
========================================================== */

.inline-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.inline-buttons .btn{

    flex:1;

}

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

@media (max-width:1100px){

    .morse-options{

        padding:22px;

    }

    .button-group{

        gap:10px;

    }

}

@media (max-width:768px){

    .morse-options{

        padding:20px;

    }

    .option-checkbox{

        font-size:14px;

    }

    .morse-options .btn{

        min-height:46px;

        font-size:14px;

    }

    .inline-buttons{

        flex-direction:column;

    }

}

/* ==========================================
   SIGNAL LIGHT
========================================== */

#signalLight{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#444;
    transition:.15s;
}

#signalLight.active{
    background:#22c55e;
    box-shadow:0 0 12px #22c55e;
}

#waveCanvas{

    width:100%;

    height:320px;

    display:block;

    background:#101010;

    border:1px solid #2d2d2d;

    border-radius:12px;

}


.visualizer-toolbar{

    display:flex;

    gap:12px;

    margin-bottom:18px;

    flex-wrap:wrap;

}

#waveCanvas{

    width:100%;
    height:220px;
    display:block;
    border-radius:10px;
    border:1px solid #2d2d2d;
    background:#101010;

}

/* ==========================================
   AUDIO + VISUALIZER
========================================== */

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

.dashboard-grid{

    display:grid;

    grid-template-columns:1.6fr 1fr;

    gap:24px;

    align-items:start;

}

.dashboard-left,
.dashboard-right{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.dashboard-left > .hero-card,
.dashboard-right > .hero-card{

    width:100%;

}

@media(max-width:1000px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

}

.panel-divider{

    margin:28px 0;

    border:none;

    border-top:1px solid #2d2d2d;

}

.stats-grid{

    display:grid;

    gap:12px;

}

.stats-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #2d2d2d;

}

.stats-row:last-child{

    border-bottom:none;

}

.audio-layout{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    align-items:center;

    margin-bottom:24px;

}

.slider-grid{

    display:grid;

    gap:24px;

}

.reference-table-wrapper{

    margin-top:20px;

    max-height:420px;

    overflow:auto;

}

/* ==========================================
   Statistics Table
========================================== */

.stats-table{

    width:100%;

    border-collapse:collapse;

    margin-top:18px;

    background:#181818;

    border:1px solid #2d2d2d;

    border-radius:12px;

    overflow:hidden;

}

.stats-table tr{

    border-bottom:1px solid #2d2d2d;

}

.stats-table tr:last-child{

    border-bottom:none;

}

.stats-table td{

    padding:14px 18px;

    font-size:15px;

}

.stats-table td:first-child{

    color:#b5b5b5;

    width:65%;

}

.stats-table td:last-child{

    text-align:right;

    font-weight:700;

    color:#ffffff;

    font-family:Consolas, Monaco, monospace;

}

/* ==========================================
   Shared Info Table
========================================== */

.info-table{

    width:100%;

    margin-top:18px;

    border-collapse:collapse;

    overflow:hidden;

    border:1px solid #2d2d2d;

    border-radius:12px;

    background:#181818;

}

.info-table thead{

    background:#202020;

}

.info-table th{

    padding:14px 18px;

    text-align:left;

    font-size:14px;

    font-weight:700;

    color:#ffffff;

    border-bottom:1px solid #2d2d2d;

}

.info-table td{

    padding:14px 18px;

    border-bottom:1px solid #2d2d2d;

    font-size:15px;

}

.info-table tbody tr:last-child td{

    border-bottom:none;

}

.info-table tbody tr:hover{

    background:#232323;

}

/* Statistics value */

.info-table td:last-child{

    text-align:right;

    font-weight:700;

    color:#ffffff;

    font-family:Consolas, Monaco, monospace;

}

/* Reference table */

#referenceTable td:first-child{

    width:30%;

    font-weight:700;

}

#referenceTable td:last-child{

    text-align:left;

    font-family:Consolas, Monaco, monospace;

    color:#7dd3fc;

}

.reference-table-wrapper{

    margin-top:18px;

    max-height:420px;

    overflow:auto;

    border-radius:12px;

}

/* ==========================================
   AUDIO CARD
========================================== */

.audio-card{

    display:flex;
    flex-direction:column;
    gap:24px;

}

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

.audio-section{

    background:#181818;
    border:1px solid #2d2d2d;
    border-radius:14px;
    padding:18px;

}

.audio-section h3{

    margin:0 0 18px;
    font-size:15px;
    color:#bfbfbf;
    text-transform:uppercase;
    letter-spacing:.08em;

}

/* ==========================================
   CONTROLS
========================================== */

.audio-controls{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;

}

.audio-controls .btn{

    width:100%;

}

#audioStatus{

    grid-column:1/-1;

}

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

.audio-status{

    grid-column:1/-1;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 16px;

    background:#101010;

    border:1px solid #2d2d2d;

    border-radius:10px;

}

.audio-status span{

    color:#bbb;
    font-weight:600;

}

/* ==========================================
   SETTINGS
========================================== */

.setting-row{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-top:12px;
    margin-bottom:8px;

}

.setting-label{

    color:#d6d6d6;
    font-weight:600;

}

.setting-row strong{

    color:var(--primary-color);

}

/* ==========================================
   SLIDERS
========================================== */

.audio-card input[type=range]{

    width:100%;
    margin-bottom:18px;

}