/* Origami Strain Solver — traditional / classic theme */

:root {
    --bg-app: #d4d0c8;
    --bg-panel: #ece9d8;
    --bg-panel-2: #f5f4ea;
    --bg-viewport: #808080;
    --border: #808080;
    --border-light: #aca899;
    --text: #000000;
    --text-muted: #333333;
    --accent: #316ac5;
    --font: Tahoma, "Segoe UI", Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-sm: 13px;
}

html, body {
    font-family: var(--font);
    font-size: var(--font-size-base);
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg-app);
    color: var(--text);
}

/* Home */
#homePage {
    background: var(--bg-panel) !important;
    border: 2px outset #fff;
}

.welcome-banner h1 {
    font-weight: bold !important;
    font-size: 2.5rem !important;
    color: var(--text) !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.home-btn {
    border: 2px outset #fff !important;
    border-radius: 0 !important;
    background: #ece9d8 !important;
    color: var(--text) !important;
    font-weight: normal !important;
    font-size: 18px !important;
    padding: 8px 28px !important;
    cursor: pointer;
}

.home-btn:hover {
    background: #f5f4ea !important;
}

.home-btn:active {
    border-style: inset !important;
}

/* Nav */
#globalNav.navbar {
    background: var(--bg-panel) !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    min-height: 28px;
    border-radius: 0 !important;
}

#globalNav .navbar-nav > li > a {
    color: var(--text) !important;
    font-weight: normal;
    font-size: var(--font-size-base);
    padding: 6px 12px !important;
}

#globalNav .navbar-nav > li > a:hover,
#globalNav .navbar-nav > li > a:focus {
    color: var(--accent) !important;
    background: var(--bg-panel-2) !important;
    text-decoration: underline;
}

/* Main layout */
.app-main {
    display: flex;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 28px - 48px);
}

.panel-side {
    width: 268px;
    min-width: 268px;
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    padding: 10px !important;
}

.panel-side--right {
    border-left: 1px solid var(--border) !important;
    border-right: none !important;
}

.panel-side__title {
    margin: 0 0 10px 0;
    padding-bottom: 4px;
    color: var(--text);
    font-size: var(--font-size-base);
    font-weight: bold;
    border-bottom: 1px solid var(--border-light);
}

.param-row {
    margin-bottom: 10px;
}

.param-label {
    display: block;
    color: var(--text);
    font-size: var(--font-size-base);
    font-weight: normal;
    margin-bottom: 3px;
}

/* Slider + value on same row */
.sliderInput {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.sliderInput > .flat-slider {
    flex: 1;
    min-width: 0;
}

.param-value,
.panel-side input[type="text"][readonly] {
    flex-shrink: 0;
    width: 44px !important;
    background: #ffffff !important;
    border: 1px inset var(--border-light) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    padding: 2px 4px !important;
    font-size: var(--font-size-base) !important;
    text-align: right;
    margin: 0 !important;
}

.viewport-3d {
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: var(--bg-viewport);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

#threeContainer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#threeContainer canvas {
    display: block;
}

#gpuMathCanvas {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* Right panel toolbar */
.panel-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.toolbar-sliders {
    width: 100%;
}

.btn-classic {
    border: 2px outset #fff;
    border-radius: 0;
    font-family: var(--font);
    font-weight: normal;
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: 3px 10px;
    background: #ece9d8;
    color: var(--text);
}

.btn-classic:hover {
    background: #f5f4ea;
}

.btn-classic:active {
    border-style: inset;
}

.panel-collect-row {
    margin-bottom: 8px;
}

.btn-collect {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-weight: bold;
    background: #c0dcc0;
    border: 2px outset #fff;
}

.btn-export,
.btn-chart {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    background: #ece9d8;
}

.panel-actions {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}
.data-table-wrap {
    width: 100%;
    color: var(--text);
    font-size: var(--font-size-base);
    flex: 1;
    border-collapse: collapse;
    border: 1px inset var(--border-light);
    background: #ffffff;
}

.data-table-wrap thead {
    background: var(--bg-panel);
}

.data-table-wrap th {
    text-align: left;
    padding: 4px 6px;
    font-size: var(--font-size-sm);
    font-weight: bold;
    color: var(--text);
    border: 1px solid var(--border-light);
}

.data-table-wrap tbody tr:nth-child(even) {
    background: #f5f4ea;
}

.data-table-wrap tbody td {
    padding: 3px 6px;
    font-size: var(--font-size-base);
    border: 1px solid var(--border-light);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Data table */
.dock-fold {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-panel) !important;
    border-top: 1px solid var(--border) !important;
    padding: 6px 12px !important;
    z-index: 1000;
}

.dock-fold__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.fold-readout {
    background: #ffffff !important;
    color: var(--text) !important;
    padding: 2px 8px !important;
    border-radius: 0 !important;
    border: 1px inset var(--border-light) !important;
    min-width: 44px;
    font-variant-numeric: tabular-nums;
}

.fold-readout #currentFoldValue {
    font-weight: normal !important;
    font-size: var(--font-size-base) !important;
}

.btn-play {
    padding: 3px 14px !important;
    background: #ece9d8 !important;
    color: var(--text) !important;
    border: 2px outset #fff !important;
    border-radius: 0 !important;
    font-size: var(--font-size-base) !important;
    font-weight: normal !important;
    font-family: var(--font) !important;
    cursor: pointer;
}

.btn-play:hover {
    background: #f5f4ea !important;
}

.btn-play:active {
    border-style: inset !important;
}

/* jQuery UI sliders — classic track */
#inputParamsMenu .ui-slider,
#rightTablePanel .ui-slider,
#creasePercentBottom .ui-slider {
    height: 8px !important;
    border: 1px inset var(--border-light) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

#inputParamsMenu .ui-slider-range,
#rightTablePanel .ui-slider-range,
#creasePercentBottom .ui-slider-range {
    background: var(--accent) !important;
    border-radius: 0 !important;
}

#inputParamsMenu .ui-slider-handle,
#rightTablePanel .ui-slider-handle,
#creasePercentBottom .ui-slider-handle {
    width: 12px !important;
    height: 18px !important;
    top: 50% !important;
    margin-top: -9px !important;
    margin-left: -6px !important;
    border-radius: 0 !important;
    background: #ece9d8 !important;
    border: 2px outset #fff !important;
    box-shadow: none !important;
}

#creasePercentBottom .ui-slider-handle {
    outline: none !important;
}

#creasePercentBottom .ui-slider-handle::before,
#creasePercentBottom .ui-slider-handle::after {
    display: none !important;
}

/* WIP modal */
.wip-content {
    background: var(--bg-panel) !important;
    border: 2px outset #fff !important;
    border-radius: 0 !important;
    color: var(--text);
}

.wip-content h2 {
    color: var(--text) !important;
    font-family: Georgia, "Times New Roman", serif;
}

.wip-content p {
    color: var(--text-muted) !important;
}

.wip-close {
    background: #ece9d8 !important;
    border: 2px outset #fff !important;
    border-radius: 0 !important;
    color: var(--text) !important;
}

/* Bootstrap modals */
.modal-content {
    background: var(--bg-panel);
    border: 2px outset #fff;
    border-radius: 0;
    color: var(--text);
}

.modal-body .close {
    color: var(--text);
    opacity: 1;
    text-shadow: none;
}

.modal-footer .btn-success {
    background: #ece9d8;
    border: 2px outset #fff;
    border-radius: 0;
    color: var(--text);
}

.modal-body .form-control,
.modal-body input[type="text"] {
    background: #ffffff !important;
    border: 1px inset var(--border-light) !important;
    color: var(--text) !important;
    border-radius: 0 !important;
}

.modal-body b {
    color: var(--text);
    font-weight: bold;
}

body {
    background: var(--bg-app);
}

#globalNav.navbar-inverse .navbar-nav > li > a {
    color: var(--text) !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}