/* Custom properties for reusability */
:root {
    --primary-bg: #1a1a1a;
    --primary-text: #fff;
    --accent-red: #ff471a;
    --accent-blue: #1a75ff;
    --accent-yellow: #ffff00;
    --border-radius: 5px;
    --spacing-sm: 5px;
    --spacing-md: 10px;
    --font-primary: 'Helvetica', 'Verdana', sans-serif;
    --font-mono: 'Courier New', monospace;
}
/* Scale up for 1080p (1920x1080) at ~100% DPI */
@media screen and (min-width: 1920px) and (max-width: 2559px) and (min-resolution: 0.8dppx) and (max-resolution: 1.2dppx) {
  body {
    transform: scale(1.3); /* 130% zoom for 1080p */
    transform-origin: top left;
    width: 76.92%; /* 100 / 1.3 */
    height: 76.92%;
  }
}

/* Scale up for 1440p (2560x1440) at ~100% DPI or 1080p at ~150% DPI */
@media screen and (min-width: 2560px) and (max-width: 3839px) and (min-resolution: 0.8dppx) and (max-resolution: 1.2dppx),
       screen and (min-width: 1707px) and (max-width: 1919px) and (min-resolution: 1.3dppx) and (max-resolution: 1.7dppx) {
  body {
    transform: scale(2.0); /* 200% zoom for 1440p */
    transform-origin: top left;
    width: 50%; /* 100 / 2.0 */
    height: 50%;
  }
}

/* Scale up for 4K (3840x2160) at ~100% DPI or 1080p/1440p at higher DPI */
@media screen and (min-width: 3840px) and (max-width: 5119px) and (min-resolution: 0.8dppx) and (max-resolution: 1.2dppx),
       screen and (min-width: 1920px) and (max-width: 2559px) and (min-resolution: 1.8dppx) and (max-resolution: 2.2dppx),
       screen and (min-width: 1280px) and (max-width: 1706px) and (min-resolution: 2.3dppx) and (max-resolution: 3.2dppx) {
  body {
    transform: scale(3.0); /* 300% zoom for 4K */
    transform-origin: top left;
    width: 33.33%; /* 100 / 3.0 */
    height: 33.33%;
  }
}

body {
    overflow-x: hidden;
    margin: 0;
    background-color: var(--primary-bg);
    color: cyan;
    font-family: var(--font-primary);
}

#sdr_page:after {
    content: "";
    display: table;
    clear: both;
}

/* Slider controls */
.slider-label {
    display: inline-block;
    width: 50px;
    text-align: right;
    font-weight: bold;
}

.sbitx-slider {
    width: 100px;
}

.slider-reading {
    display: inline-block;
    text-align: right;
    width: 50px;
}

.sbitx-selection {
    border: none;
    font-size: 12pt;
    color: var(--primary-text);
    background: var(--primary-bg);
}

.sbitx-selection option {
    font-size: 11px;
}

select,
select option,
input {
    background: var(--primary-bg);
    color: var(--primary-text);
    opacity: 1;
}

.sbitx-text-input {
    height: 30px;
    font-size: 12pt;
}

/* Sidebar */
#sidebar {
    float: left;
    width: 200px;
    background-color: var(--primary-bg);
    padding-top: 30px;
}

#restore-btn {
    float: right;
    display: inline-block;
    background-color: #444;
    font-size: 20pt;
    position: fixed;
    top: 0;
    right: 0;
    padding: var(--spacing-sm);
    text-align: center;
    color: var(--primary-text);
    margin: 2px;
    border-radius: var(--border-radius);
    z-index: 99;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', sans-serif;
}

.menu-item {
    display: flex;
    width: 200px;
    padding: 0;
    margin-bottom: var(--spacing-md);
    vertical-align: center;
    text-align: center;
}

#tx_meters {
    position: absolute;
    background-color: var(--accent-red, #ff4d4d); /* Fallback color */
    padding: var(--spacing-md, 0.75rem); /* Fallback to rem */
    width: clamp(160px, 20vw, 200px); /* Responsive width */
    height: clamp(48px, 8vh, 60px); /* Responsive height */
    color: var(--primary-text, #ffffff); /* Fallback text color */
    display: none;
    z-index: 1;
    border-radius: 6px; /* Modern rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth show/hide */
}
#rx_controls {
    display: block;
    height: 60px;
}

#dial {
    background-color: #3dacbf;
    width: 146px;
    padding-top: 0;
    text-align: left;
    align-items: center;
    /* Vertical centering */
    justify-content: center;
    /* Horizontal centering */
    height: 40px;
}

#tuning_knob {
    display: inline-block !important;
    background: #000000;
    /* Darker than --primary-bg */
    padding: 0;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.15);
    /* Modern shadow */
    text-align: center;
    /* Ensure canvas is centered */
    line-height: 100px;
    /* Match knob height */
}

#tuning_knob input.knob {
    background: transparent !important;
    color: var(--primary-text) !important;
    border: none;
    font-size: 10pt;
    font-family: var(--font-primary);
    text-align: center;
    width: 50px;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    /* Glowing text */
}

#tuning_knob:hover {
    box-shadow: 0 3px 8px rgba(255, 255, 255, 0.2);
    transition: box-shadow 0.2s ease;
}

/* Ensure canvas is centered */
#tuning_knob canvas {
    display: block;
    margin: 0 auto;
}

#freq_status {
    background-color: var(--accent-yellow);
    color: var(--primary-bg);
}

#current_freq {
    font-size: 18pt;
    line-height: 23px;
    font-weight: bold;
    color: var(--accent-yellow);
}

#other_freq {
    color: var(--primary-bg);
}

.dial_details {
    background-color: var(--primary-bg);
    color: var(--primary-text);
    border-radius: var(--border-radius);
    font-size: 9pt;
    padding: var(--spacing-sm);
    display: inline-block;
    width: 72px;
    text-align: left;
}

#tx_drive_reading {
    color: var(--primary-text);
    background-color: red;
}

#current_freq:after {
    text-align: right;
    float: right;
}

/* Logger styling */
.logger-input {
    border: 1px solid var(--primary-text);
    height: 35px;
    text-transform: uppercase;
}

.logger-button {
    height: 30px;
    border: none;
    background-color: var(--accent-blue);
    color: var(--primary-text);
    margin: var(--spacing-sm);
    border-radius: var(--border-radius);
}

#SENT,
#RECV {
    width: 60px;
}

/* CW panel */
#cw_settings {
    padding: var(--spacing-sm) 0;
}

#data_window {
    height: 70px;
    color: green;
    text-align: left;
    font-size: 12pt;
    overflow: auto;
    border: 1px solid #333;
}

.data_rx {
    color: #52ff6a;
}

.data_tx {
    color: orange;
    font-weight: bold;
}

#data_chat_tx,
#data_chat_rx,
#ptt_tx,
#ptt_rx {
    width: 150px;
    height: 30px;
    color: var(--primary-text);
}

#data_chat_tx {
    background-color: red;
    padding-right: 20px;
}

#data_chat_rx {
    background-color: blue;
    padding-left: 20px;
}

#ptt_tx {
    background-color: red;
    padding-right: 20px;
    height: 45px;
}

#ptt_rx {
    background-color: blue;
    padding-left: 20px;
    height: 45px;
}

/* Voice panel */
#Voice_ui {
    text-align: center;
    padding-bottom: var(--spacing-md);
    background-color: var(--primary-bg);
}

/* Logbook */
#logbook_panel {
    z-index: 1;
}

#logbook_panel table {
    width: 100%;
}

#logbook_table thead tr {
    display: block;
    font-size: 11pt;
    color: var(--primary-text);
    text-align: right;
}

#logbook_table tbody {
    display: block;
    height: 200px;
    overflow: auto;
}

#logbook-toobar {
    margin: var(--spacing-sm) 0;
}

.logbook-id {
    width: 50px;
    font-size: 9pt;
    color: #444;
}

.logbook-datestamp {
    width: 150px;
    font-size: 9pt;
    color: #888;
}

.logbook-lfield,
.logbook-field {
    font-size: 10pt;
    color: var(--primary-text);
    text-transform: uppercase;
}

.logbook-lfield {
    padding-left: var(--spacing-md);
    text-align: left;
}

.logbook-field {
    text-align: right;
}

#logbook-search {
    text-transform: uppercase;
}

.logbook-serial {
    width: 30px;
}

.logbook-freq {
    width: 75px;
}

.logbook-call {
    width: 75px;
}

.logbook-mode {
    width: 50px;
}

.logbook-sent {
    width: 70px;
}

.logbook-recv {
    width: 70px;
}


/* Console panel */
#console_window,
#telnet_window {
    width: 100%;
    height: 200px;
    white-space: pre-wrap;
    overflow: auto;
    font-family: var(--font-mono);
    color: green;
    border: 1px solid green;
    padding-bottom: 3px;
    background-color: var(--primary-bg);
    text-align: left;
    vertical-align: top;
}

#command_bar,
#telnet_command_bar {
    width: 100%;
}

#text_in,
#telnet_in {
    width: 95%;
    border: 1px solid var(--primary-text);
}

#telnet_command_bar {
    margin: 3px;
}

/* Settings panel */
#settings_panel {
    padding-bottom: var(--spacing-md);
    border: 1px solid var(--primary-text);
    background-color: var(--primary-bg);
    z-index: 1;
}

.settings-element {
    margin: 8px;
}

.settings-label {
    display: inline-block;
    width: 150px;
    text-align: right;
}

.settings_input {
    text-transform: uppercase;
}

/* Coloring */
.greyed {
    color: #888;
}

/* Panel styling */
.sbitx-panel {
    float: right;
    padding: 0;
    background: var(--primary-bg);
}
.sbitx-panel * {
    vertical-align: top; /* Align inline/inline-block children to the top */
}

.sbitx-panel-title {
    float: left;
    display: inline-block;
   font-size: 14pt;
}

.sbitx-btn-back {
    font-size: 14pt;
    background: linear-gradient(to bottom, #444, #222);
    color: var(--primary-text);
    margin-right: 20px;
    border: none;
}

/* Waterfall and spectrum */
#pan_adapter {
    clear: both;
    width: 100%;
    box-sizing: border-box;
    border: 4px solid #333;
    border-radius: 12px;
    padding: 5px;
    margin: 2px;
    background: linear-gradient(to bottom, #2a2a2a, #1f1f1f);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.7);
    text-align: left;
    vertical-align: top;

}

#spectrum-wrap, #waterfall, #spectrum {

    padding: 0px;
    margin-top: 0px;
}

#spectrum canvas,
#waterfall canvas {
    width: 100% !important;
    /* Ensure canvases stretch to full width */
    height: auto;
    /* Maintain aspect ratio */
}

/* FT8/WSJT-X styling */
.sbitx-list-container {
    box-sizing: border-box;
    display: inline-block;
    font-family: courier, monospace-ui, monospace;
    font-size: 10pt;
    height: 405px;
    width: 360px;
    overflow-y: scroll;     /* <--- always reserve space */
    overflow-x: hidden;

    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-radius: 10px;
    border-top: 2px solid #3a3a3a;
    border-left: 2px solid #2a2a2a;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;

    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05),
                0 4px 12px rgba(0, 0, 0, 0.5);
    padding: 0px;
    color: #ccc;
    box-sizing: border-box;
}

.list-default {
    font-size: 9pt;
    font-weight: bold;
    color: var(--primary-text);
}

.ftx-generic {
	color: rgb(0, 160, 141);
}

.ftx-caller {
	font-weight: bold;
    color: rgb(211, 97, 66);
}

.ftx-grid {
	font-weight: bold;
    color: rgb(255, 204, 0);
}

.ftx-distance {
	font-size: 8pt;
	color: rgb(255, 204, 0);
}

.ftx-azimuth {
	font-size: 8pt;
	color: rgb(153, 102, 0);
}

.ftx-mycallsign {
	font-weight: bold;
    color: rgb(255, 0, 0);
}

.ftx-queued {
    color: rgb(128, 128, 128);
}

.ftx-tx {
    color: rgb(184, 123, 38);
}

.ftx-reply {
    font-size: 8pt;
	vertical-align: baseline;
	font-weight: bold;
    color: rgb(82, 255, 106);
}

/* Generic UI elements */
.sbitx-list-box .ui-selected {
    background: grey;
    color: var(--primary-text);
}

.sbitx-list-box {
    list-style-type: none;
    margin: 20;
    padding: 0;
    font-size: 9pt;
}

.sbitx-list-box li {
    margin: 0;
    padding: 0;
    height: 9pt;
}

/* v3 styles */
#macro_keys td {
    width: 10%;
    margin: 2px;
    padding: 2px;
    height: 40px;
    text-align: center;
    border: 1px solid var(--primary-text);
    background-color: var(--primary-bg);
    opacity: 1;
    font-size: 15pt;
}

.sbitxv3-VFO {
    text-align: left;
    min-width: 180px;
    padding-top: var(--spacing-sm);
    padding-left: 3px;
    height: 36px;
    border: 1px solid #333;
    font-size: 12px;
    vertical-align: top;
    display: inline-block;
}

.sbitxv3-MACRO {
    text-align: left;
    min-width: 40px;
    max-width: 75px;
    padding-top: var(--spacing-sm);
    padding-left: 3px;
    height: 36px;
    border: 1px solid #333;
    font-size: 12px;
    vertical-align: top;
    display: inline-block;
}



.sbitxv3-control,
.sbitxv3-control2,
.linear {
    background: linear-gradient(to bottom, #444, #222);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px #111;
    color: #eee;

    text-align: left;
    min-width: 35px;
    max-width: 50px;
    padding-top: var(--spacing-sm);
    padding-left: 5px;
    height: 36px;
    border: 1px solid #333;
    font-size: 12px;
    vertical-align: top;
    display: inline-block;
}

.sbitxv3-selection {
    border: 0;
    font-size: 11px;
    margin-left: -4px;
    min-width: 30px;
}

.sbitxv3-selection option {
    font-size: 12px;
    width: 70px;
}

/* CW_INPUT dropdown */
#CW_INPUT {
    min-width: 100px;
}

/* Make the CW_INPUT container wider */
#linear_CW_INPUT {
    min-width: 97px;
    width: auto;
}
.btn-value {
    background-color: black;
}
#SELBAND {
    font-family:'Courier New', Courier, monospace;
    font-size: 12px;
}
.sbitxv3-btn,
.logger-button {
    height: 43px;
    background: linear-gradient(to bottom, #444, #222);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px #111;
    color: #eee;
    padding-bottom: 5px;
    text-align: center;
    /*font-weight: bold;*/
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.sbitxv3-btn:hover,
.logger-button:hover {
    background: linear-gradient(to bottom, #555, #333);
}

.sbitxv3-btn:active,
.logger-button:active {
    box-shadow: 0 2px #111;
    transform: translateY(2px);
}


.sbitxv3-macro {
    text-align: left;
    width: 75px;
    padding-top: var(--spacing-sm);
    padding-left: 3px;
    height: 36px;
    border: 1px solid #888;
    font-size: 12px;
    font-weight: bold;
    vertical-align: top;
    display: inline-block;
    color: var(--primary-bg);
    background-color: var(--primary-text);
}



#maincontrols {
    background: var(--primary-bg);
    z-index: 1;
}

#settings-open:after {
    content: '\2197';
    top: 0;
    right: 0;
}

.sbitxv3-value {
    color: var(--primary-text);
}

.linear-value {
    width: 40px;
    font-size: 11px;
    border: 0;
}

.linear-dropdown {
    display: none;
    position: absolute;
    width: 45px;
    height: 100px;
    z-index: 1;
    background-color: var(--primary-bg);
}

.linear-slider {
    appearance: slider-vertical;
    height: 90px;
    width: 45px;
}

.macro-btn {
    height: 45px;
    min-width: 50px;
    border: 1px solid #888;
    background-color: var(--primary-bg);
    color: var(--primary-text);
    line-height: 15px;
}

.sbitx-text-field {
    margin-top: 4px;
    height: 33px;
    border: 1px solid #888;
}

.longer-control {
    width: 100px;
}

.longer-control .sbitxv3-selection {
    width: 80px;
}

.rx-control,
.rx-control input,
.rx-control select {
    background-color: #0033cc;
}

#logger-log,
#wipe,
#logbook-open,
#qrz {
    background-color: #049117;
    margin-top: 2px;
    padding: 0 2px;
    height: 36px;
}

#linear_DRIVE,
#linear_DRIVE>.linear-dropdown,
#linear_DRIVE>.linear-value {
    background-color: #bf0f0f;
}

#TEXT {
    width: 100%;
    display: inline-block;
}

#CW_INPUT {
    background-color: var(--primary-bg);
    border: 1px solid #333;
}

#dial-dropdown {
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 1;
    background-color: var(--primary-bg);
}

#qrz {
    width: 20px;
    min-width: 20px;
}

#console {
    display: none;
    position: absolute;
    background-color: var(--primary-text);
    padding: 2px;
    width: 200px;
    color: var(--primary-bg);
}

#keybd,
#keybd-container {
    z-index: 1;
    background-color: var(--primary-bg);
    opacity: 1;
}

#keybd td {
    width: 6%;
    margin: 2px;
    padding: 2px;
    height: 40px;
    text-align: center;
    border: 1px solid var(--primary-text);
    background-color: var(--primary-bg);
    opacity: 1;
    font-size: 15pt;
}

#login_error {
    background-color: var(--accent-yellow);
    color: var(--primary-bg);
}

#main {
    vertical-align: top;
    z-index: -1;
}

#FT8_controls {
    display: block;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: darkgreen;
    color: var(--primary-text);
    text-align: center;
    padding: var(--spacing-sm) 0;
    border-radius: var(--border-radius);
    position: absolute;
    left: 0;
    top: -24px;
    font-size: small;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
}

#gridmap {
    border: 4px solid #333;
    border-radius: 10px;
    background: #1a1a1a;
    justify-content: center;
    padding: 8px;
    margin-top: 0px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05),
                0 4px 12px rgba(0, 0, 0, 0.5);
    vertical-align: top;
    overflow-x: hidden


}

#login_panel {
    width: 700px;
    box-sizing: border-box;
    border: 4px solid #333;
    border-radius: 12px;
    padding: 5px;
    margin: 100px auto;
    background: linear-gradient(to bottom, #2a2a2a, #1f1f1f);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.7);
    text-align: center;
    vertical-align: top;

}


#digi_ui, #menu_panel, #keybd, #logbook_table, #logbook-toolbar, #maincontrols, #FT8_ui, #more_keys, #CW_ui, #Voice_ui, #console_panel, #telnet_panel, #settings_panel, #recorder_panel, #logger-controls {
    clear: both;
    width: 100%;
    box-sizing: border-box;
    border: 4px solid #333;
    border-radius: 12px;
    padding: 5px;
    margin: 2px;
    background: linear-gradient(to bottom, #2a2a2a, #1f1f1f);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.7);
    text-align: left;
    vertical-align: top;

}


#record_start {
    color: red;
    font-weight: bold;
    width: 60px;
    margin-left: 20px;
}

#record_stop {
    color: green;
    font-weight: bold;
    width: 60px;
    margin-left: 20px;

}

#record_duration {
    color: var(--primary-text);
}

/* General container styling for help_text */
.help_text {
    background: #1a1a1a; /* Dark background for tech aesthetic */
    color: #e0e0e0; /* Light text for contrast */
    padding: 30px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    text-align: center; /* Center-align text */
    font-family: 'Arial', sans-serif; /* Clean, modern font */
}

/* Heading */
.help_text h1 {
    font-size: 2.2em; /* Large but not overwhelming */
    margin: 0 0 15px; /* Space below */
    color: #00b7eb; /* Bright cyan for tech vibe */
}

/* Paragraphs */
.help_text p {
    font-size: 1em; /* Readable size */
    margin: 10px 0; /* Consistent spacing */
    line-height: 1.5; /* Improved readability */
}

/* License and Discord paragraphs */
.help_text p:nth-last-of-type(-n+2) {
    font-size: 0.9em !important; /* Slightly smaller for footer-like text */
    color: #a0a0a0 !important; /* Muted color for less emphasis */
    margin-top: 20px !important; /* Extra space above */
}
.help_text a {
    color: #00b7eb;
    text-decoration: none;
    transition: color 0.3s;
}

.help_text a:hover {
    color: #009bcb;
    text-decoration: underline;
}

#browser_mic {
    white-space: pre-line;  /* This respects newlines and wraps text */
    text-align: center;    /* Center the text if desired */
}

#keypad_panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #333;
    border: 2px solid #555;
    padding: 8px;
    z-index: 1000;
    width: 200px; /* Reduced width */
    max-width: 90%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

#keypad_input {
    margin-bottom: 8px;
}

#freq_input {
    width: 100%;
    padding: 4px;
    font-size: 14px; /* Smaller font size for smaller panel */
    text-align: right;
    background-color: #222;
    color: #fff;
    border: 1px solid #555;
    box-sizing: border-box;
}

#keypad_buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px; /* Reduced gap for tighter layout */
}

.keypad-btn {
    background-color: #444;
    color: #fff;
    border: 1px solid #555;
    padding: 8px; /* Smaller padding */
    font-size: 14px; /* Smaller font size */
    cursor: pointer;
    text-align: center;
}

.keypad-btn:hover {
    background-color: #555;
}

#keypad_clear, #keypad_delete, #keypad_enter {
    grid-column: span 1;
}

#keypad_enter {
    background-color: #1a75ff;
}

#keypad_enter:hover {
    background-color: #0d47a1;
}

#keypad_clear {
    background-color: #ff4444;
}

#keypad_clear:hover {
    background-color: #cc0000;
}

#keypad_delete {
    background-color: #ffaa00;
}

#keypad_delete:hover {
    background-color: #cc8800;
}

/* Adjust panel title for smaller width */
#keypad_panel .sbitx-panel-title {
    font-size: 14px; /* Smaller title font */
    margin: 0 0 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#keypad_panel .sbitx-btn-back {
    font-size: 12px; /* Smaller close button */
    padding: 4px 8px;
}

#menu-open, #menu-open2, #menu-open3, #menu-open4 {
  float: right;
  margin-right: 30px;
}


#gridmap {
    display: inline-block;
    border: 4px solid #333;
    border-radius: 10px;
    background: #1a1a1a;
    justify-content: center;
    padding: 8px;
    margin-top: 0px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05),
                0 4px 12px rgba(0, 0, 0, 0.5);
    vertical-align: top;
    overflow-x: hidden
}