/* Hilbert Transform & Analytic Signal Lab - Dark engineering aesthetic */
/* requirements.txt: max width of the simulation area = 800px */

.ht-tab-app {
    display: block;
    max-width: 800px;
    margin-top: 12px;
}

.ht-tab-bar-wrap {
    display: block;
    padding: 6px 0 0 0;
    background: #0a0a0a;
    border: 1px solid #333;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.ht-tabs,
#ht-tab-bar-wrap .ht-tabs {
    display: flex !important;
    flex-direction: row;
    gap: 4px;
    margin: 0 0 -1px 12px;
    padding: 0;
    border-bottom: 1px solid #333;
}

.ht-tabs .ht-tab-btn,
#ht-tab-bar-wrap .ht-tab-btn {
    display: inline-block !important;
    padding: 8px 18px;
    font-size: 13px;
    font-family: 'Segoe UI', Tahoma, 'Courier New', monospace;
    background: #222 !important;
    color: #888 !important;
    border: 1px solid #444;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}

.ht-tabs .ht-tab-btn:hover,
#ht-tab-bar-wrap .ht-tab-btn:hover {
    background: #333 !important;
    color: #0fc !important;
}

.ht-tabs .ht-tab-btn.ht-tab-active,
#ht-tab-bar-wrap .ht-tab-btn.ht-tab-active {
    background: #0a0a0a !important;
    color: #0fc !important;
    border-color: #0fc;
    margin-bottom: -1px;
    padding-bottom: 9px;
}

.ht-tab-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ht-tab-panel.ht-tab-panel-active {
    display: block;
    opacity: 1;
    padding: 0;
    border: 1px solid #333;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: #050505;
}

.ht-tab-panel #content_sim {
    margin: 0;
}

.ht-placeholder {
    padding: 24px;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 6px;
    color: #666;
    font-family: 'Segoe UI', Tahoma, 'Courier New', monospace;
}

.ht-env-viz-container {
    padding: 12px;
    background: #050505;
}

.ht-env-viz-container .ht-env-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ht-env-viz-container .ht-env-control-row label {
    font-size: 12px;
    color: #aaa;
}

.ht-env-viz-container .ht-env-control-row input[type="range"] {
    width: 160px;
}

.ht-env-viz-container .ht-env-control-row span {
    font-size: 12px;
    color: #0fc;
    min-width: 36px;
}

.ht-env-viz-container .ht-env-control-row .ht-env-control-gap {
    width: 24px;
    min-width: 24px;
    flex-shrink: 0;
}

.ht-env-mod-depth-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ht-env-viz-container .ht-env-control-row select {
    background: #222;
    color: #0fc;
    border: 1px solid #444;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 100px;
}

.ht-env-canvas-wrap {
    width: 100%;
    height: 390px; /* 300 * 1.3 */
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
}

#ht-env-tab-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #050505;
}

.ht-tab-doc {
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 13px;
    color: #aaa;
    line-height: 1.5;
    background: rgba(15, 15, 15, 0.6);
    border: 1px solid #333;
    border-radius: 4px;
}
.ht-tab-doc h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #0fc;
}
.ht-tab-doc p {
    margin: 0 0 6px 0;
}
.ht-tab-doc p:last-child {
    margin-bottom: 0;
}

.ht-env-description {
    margin-top: 12px;
    font-size: 13px;
    color: #aaa;
    line-height: 1.4;
}

.ht-if-container {
    padding: 12px;
    background: #050505;
}

.ht-if-intro {
    font-size: 13px;
    color: #aaa;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.ht-if-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ht-if-control-row label {
    font-size: 12px;
    color: #aaa;
}

.ht-if-control-row input[type="range"] {
    width: 100px;
}

.ht-if-control-row select {
    background: #222;
    color: #0fc;
    border: 1px solid #444;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 100px;
}

.ht-if-readout {
    font-size: 12px;
    color: #0fc;
    font-family: monospace;
}

.ht-if-plot-label {
    font-size: 12px;
    color: #888;
    margin: 0 0 6px 0;
}

.ht-if-srch-wrap {
    width: 100%;
    height: 208px; /* 160 * 1.3 */
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

#ht-if-srch-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #050505;
}

.ht-if-canvas-wrap {
    position: relative;
    width: 100%;
    height: 494px; /* 380 * 1.3 */
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
}

.ht-if-canvas-btns {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.ht-if-canvas-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, 'Courier New', monospace;
    background: rgba(20, 20, 20, 0.9);
    color: #0fc;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
}

.ht-if-canvas-btn:hover {
    background: rgba(40, 40, 40, 0.95);
    color: #fff;
    border-color: #0fc;
}

#ht-if-tab-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #050505;
}

.ht-ssb-container {
    padding: 12px;
    background: #050505;
}

.ht-ssb-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ht-ssb-control-row label {
    font-size: 12px;
    color: #aaa;
}

.ht-ssb-control-row select {
    background: #222;
    color: #0fc;
    border: 1px solid #444;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 80px;
}

.ht-ssb-control-row input[type="checkbox"] {
    margin-right: 6px;
}

.ht-ssb-control-gap {
    width: 16px;
    min-width: 16px;
}

.ht-ssb-intro {
    font-size: 13px;
    color: #aaa;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.ht-ssb-plot-label {
    font-size: 12px;
    color: #888;
    margin: 0 0 6px 0;
}

.ht-ssb-canvas-wrap {
    position: relative;
    width: 100%;
    height: 676px; /* 520 * 1.3 */
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
}

.ht-ssb-canvas-btns {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

#ht-ssb-tab-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #050505;
}

.ht-hcoeff-container {
    padding: 12px;
    background: #050505;
}

.ht-hcoeff-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ht-hcoeff-control-row label {
    font-size: 12px;
    color: #aaa;
}

.ht-hcoeff-control-row select {
    background: #222;
    color: #0fc;
    border: 1px solid #444;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 100px;
}

.ht-hcoeff-plot-label {
    font-size: 12px;
    color: #888;
    margin: 0 0 6px 0;
}

.ht-hcoeff-source-wrap {
    width: 100%;
    height: 234px; /* 180 * 1.3 */
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.ht-hcoeff-conv-wrap {
    position: relative;
    width: 100%;
    height: 286px; /* 220 * 1.3 */
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.ht-hcoeff-conv-btns {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.ht-hcoeff-conv-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, 'Courier New', monospace;
    background: rgba(20, 20, 20, 0.9);
    color: #0fc;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
}

.ht-hcoeff-conv-btn:hover {
    background: rgba(40, 40, 40, 0.95);
    color: #fff;
    border-color: #0fc;
}

#ht-hcoeff-conv-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #050505;
}

#ht-hcoeff-source-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #050505;
}

.ht-hcoeff-intro {
    font-size: 13px;
    color: #aaa;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.ht-hcoeff-canvas-wrap {
    width: 100%;
    height: 286px; /* 220 * 1.3 */
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

#ht-hcoeff-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #050505;
}

.ht-hcoeff-summary {
    font-size: 13px;
    color: #aaa;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.ht-hcoeff-table-wrap {
    overflow-x: auto;
    border: 1px solid #333;
    border-radius: 4px;
}

.ht-hcoeff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, 'Courier New', monospace;
    color: #cce;
}

.ht-hcoeff-table th,
.ht-hcoeff-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #333;
}

.ht-hcoeff-table th {
    background: #1a1a1a;
    color: #0fc;
}

.ht-hcoeff-table tbody tr:hover {
    background: #111;
}

.ht-hcoeff-table tbody tr.ht-hcoeff-center {
    background: #1a2a1a;
    color: #0fc;
}

#content_sim {
    max-width: 800px;
    box-sizing: border-box;
}

#ht-root {
    font-family: 'Segoe UI', Tahoma, 'Courier New', monospace;
    background: #050505;
    color: #cce;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 100%;
}

#ht-controls-bar {
    width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(15, 15, 15, 0.92);
    border: 1px solid #333;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

#ht-controls-bar .ht-mode-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#ht-controls-bar .ht-mode-row label {
    font-size: 11px;
    color: #888;
}

#ht-controls-bar .ht-mode-row select {
    background: #222;
    color: #0fc;
    border: 1px solid #0fc;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 120px;
}

#ht-controls-bar .ht-controls-row-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

#ht-controls-bar .ht-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

#ht-controls-bar .ht-slider-row label {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    margin: 0;
}

#ht-controls-bar .ht-slider-row input[type="range"] {
    width: 240px;
    margin: 0;
    vertical-align: middle;
}

#ht-controls-bar button {
    background: #222;
    color: #0fc;
    border: 1px solid #0fc;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 11px;
    border-radius: 4px;
}

#ht-controls-bar button:hover {
    background: #2a3a3a;
}

#ht-controls-bar button.ht-active {
    background: #0fc;
    color: #000;
}

#ht-controls-bar .ht-run-step-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#ht-container {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: 546px; /* 420 * 1.3 */
    min-width: 0;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    background: #0a0a0a;
    box-sizing: border-box;
}

#ht-viewport-3d {
    flex: 7;
    position: relative;
    min-width: 300px;
    min-height: 520px; /* 400 * 1.3 */
    border-right: 1px solid #333;
}

#ht-viewport-3d canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}
#ht-viewport-3d canvas:active {
    cursor: grabbing;
}

#ht-sidebar {
    flex: 3;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 12px;
    min-width: 190px;
    max-width: 310px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
}

#ht-sidebar .ht-plot-container {
    width: 100%;
    box-sizing: border-box;
}

#ht-root .ht-plot-container {
    flex: 1;
    min-height: 182px; /* 140 * 1.3 */
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #050505;
}

#ht-root .ht-plot-container.ht-plot-small {
    min-height: 104px; /* 80 * 1.3 */
}

#ht-root .ht-plot-container canvas {
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
    vertical-align: top;
}

#ht-root .ht-plot-label {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 10px;
    color: #666;
    font-weight: bold;
    letter-spacing: 0.05em;
    pointer-events: none;
}

#ht-hud {
    position: absolute;
    top: 12px;
    left: 12px;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.75);
    padding: 10px 14px;
    border-left: 3px solid #0fc;
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    line-height: 1.5;
    z-index: 10;
}

#ht-hud .ht-val-real { color: #48f; }
#ht-hud .ht-val-imag { color: #f44; }
#ht-hud .ht-val-env { color: #fff; }
#ht-hud .ht-val-freq { color: #0fc; }
#ht-hud .ht-val-phase { color: #fa0; }

.ht-iq-subplot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 156px; /* 120 * 1.3 */
    height: 156px;
    background: rgba(5, 5, 5, 0.9);
    border: 1px solid #333;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.ht-iq-subplot .ht-iq-label {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 9px;
    color: #666;
    letter-spacing: 0.05em;
}

.ht-iq-subplot canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ht-3d-controls {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    z-index: 10;
}

.ht-3d-controls .ht-3d-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #333;
    border-radius: 4px;
    background: rgba(15, 15, 15, 0.9);
    color: #0fc;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ht-3d-controls .ht-3d-btn:hover {
    background: rgba(42, 58, 58, 0.95);
    border-color: #0fc;
}

#ht-scrub-wrap {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid #222;
}

#ht-scrub-wrap label {
    font-size: 11px;
    color: #888;
    display: block;
    margin-bottom: 4px;
}

#ht-scrub-wrap input[type="range"] {
    width: 100%;
}