/*─────────────────────────────────────────────────────────────*
 *   Dyehard Velocity / Muzzle-Energy Calculator – 2025 rev   *
 *─────────────────────────────────────────────────────────────*/

/* ---------- TOKENS & RESETS -------------------------------- */
:root{
    --brand:        #007bc4;           /* primary blue              */
    --brand-hover:  #005ea1;
    --accent:       #fbbc34;           /* gold highlight (hover)    */
    --text-dark:    #222;
    --gap:          1rem;              /* global gutters            */
    --radius:       12px;
    --shadow:       0 4px 14px rgba(0,0,0,.12);
    --card-bg:      #ffffff;
    --font-body:    "Arial", sans-serif;
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{ font-family:var(--font-body); color:var(--text-dark); }

/* ---------- HEADER (logo + title + About) ------------------ */
#calc-header{
    display:flex;
    align-items:center;
    gap:var(--gap);
    margin-bottom:var(--gap);
}

#calc-header h1{
    font-size:1.8rem;
    font-weight:700;
    margin:0;
    flex:1 1 auto;           /* title stretches, pushes About right */
}

#logo{
    width:60px;
    height:60px;
    flex:0 0 auto;
}

/* ---------- UNIVERSAL BUTTON STYLES ------------------------ */
.ui-button{
    display:inline-block;    
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    font-size:1rem;
    font-weight:600;
    transition:background .15s ease, box-shadow .15s ease;
}

.ui-button.primary{
    background:var(--brand);
    color:#fff;
}

.ui-button.primary:hover{
    background:var(--accent);
    box-shadow:0 0 8px var(--accent);
}

.ui-button.secondary{
    background:#777;
    color:#fff;
}

.ui-button.secondary:hover{
    background:#555;
}


/* ---------- INPUT UTILITY BAR ------------------------------ */
#control-bar{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr)) auto auto;
    align-items:end;
    gap:var(--gap);
    margin-bottom:var(--gap);
}

#control-bar label{
    display:flex;
    flex-direction:column;
    font-size:.9rem;
    gap:.25rem;
}

#control-bar input,
#control-bar select{
    font-size:1rem;
    padding:.55rem .75rem;
    border:3px solid var(--accent);
    border-radius:7px;
    outline:none;
    transition: border .15s ease, box-shadow .15s ease;
}

#control-bar input:focus,
#control-bar select:focus{
    border-color:var(--brand);
    box-shadow:0 0 8px rgba(0,123,196,.5);
}

#energy-readout{
    font-weight:700;
    align-self:center;
}

/* ---------- RESULT AREA ------------------------------------ */
#result-area{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
}

#trajectory-wrapper{
    width:100%;
    height:450px;                /* adjust to taste; JS will inject SVG */
    background:var(--card-bg);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.topbutton-section{
    display:flex;
    flex-wrap:wrap;
    gap:var(--gap);
}

.table-scroll{
    overflow-x:auto;
}

#results-table{
    width:100%;
    border-collapse:collapse;
    font-size:.95rem;
}

#results-table th,
#results-table td{
    padding:.6rem .5rem;
    border:1px solid #ddd;
}

#results-table th{
    background:#f4f4f4;
    text-align:left;
}

#results-table tr:nth-child(even){ background:#fafafa; }
#results-table tr:hover{ background:#f1f1f1; }

/* ---------- MODAL (About popup) ----------------------------- */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:1000;
}

.modal-content{
    background:#fff;
    width:min(90%,600px);
    margin:15% auto;
    padding:2rem;
    border-radius:var(--radius);
    position:relative;
}

.close{
    position:absolute;
    top:.8rem; right:1rem;
    font-size:1.8rem;
    color:#aaa;
    cursor:pointer;
}
.close:hover{ color:#000; }

.table-scroll { overflow-x: auto; }

/* ---------- RESPONSIVE POLISH ------------------------------- */
/*────────────────  MOBILE PORTRAIT OVERRIDE  ────────────────*/
@media (max-width: 768px){

    /* 0) stack the two cards */
    #calculator-container{
        display:flex !important;
        flex-direction:column !important;
    }

    /* 1) full width for each card */
    .middle-section,
    .right-section{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 2) responsive SVG (attribute width overridden) */
    .right-section svg{
        width: 100%       !important;
        height: auto      !important;
        max-width: 100%   !important;
    }

    /* 3) allow horizontal scroll on the results table */
    .table-scroll{
        overflow-x:auto   !important;
    }
}

@media (max-width: 480px){
    .right-section svg{ height: 260px !important; }  /* shorter graph */
    .topbutton-section{
        flex-direction:column !important;
        gap: .6rem;
    }
    .topbutton-section .calc-reset-button{ width:100% !important; }
}