/* TITAN Soft Glass UI
   Visual-only overrides. Application structure and behavior remain unchanged. */

:root {
  --glass-surface: rgba(255, 255, 255, .72);
  --glass-surface-strong: rgba(255, 255, 255, .88);
  --glass-line: rgba(255, 255, 255, .78);
  --glass-edge: rgba(66, 103, 68, .22);
  --glass-shadow: 0 12px 30px rgba(36, 65, 39, .15),
                  0 2px 7px rgba(36, 65, 39, .09);
}

body {
  background:
    radial-gradient(circle at 12% 5%, rgba(245, 217, 139, .40), transparent 31%),
    radial-gradient(circle at 92% 78%, rgba(74, 168, 94, .17), transparent 34%),
    linear-gradient(145deg, #fffaf0 0%, #f4ecd8 54%, #edf3e7 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgba(80, 104, 73, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 104, 73, .10) 1px, transparent 1px);
  background-size: 24px 24px;
}

#header,
#main,
#bottom-bar { position: relative; }

#header {
  padding: 9px 16px 10px;
  gap: 7px;
  background: linear-gradient(135deg, rgba(18, 83, 43, .96), rgba(43, 128, 68, .92));
  border-bottom: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 8px 26px rgba(24, 68, 35, .24), inset 0 -1px rgba(17, 69, 31, .40);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}

#header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 217, 139, .82), transparent);
  pointer-events: none;
}

.toolbar {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  margin: 1px 0 0;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px rgba(255, 255, 255, .19), 0 8px 22px rgba(9, 45, 20, .18);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}

.tb-group { flex-direction: row; gap: 0; }
.tb-group-label { display: none; }
.tb-sep {
  height: 30px;
  margin: 0 3px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.36), transparent);
}

.menu-label,
.btn,
.slot-selector,
.status-pill {
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 3px 8px rgba(5, 31, 14, .16);
}

.menu-label,
.btn-ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .09));
  border-color: rgba(255, 255, 255, .30);
}

.btn-connect { background: linear-gradient(180deg, #438fd0, #2d70b1); }
.btn-connect.connected,
.btn-run { background: linear-gradient(180deg, #45a85f, #287c42); }
.btn-stop { background: linear-gradient(180deg, #bb3b3b, #8c1919); }
.btn-upload { background: linear-gradient(180deg, #e17317, #b84d00); }
.btn-example { background: linear-gradient(180deg, #3b83b9, #245f8d); }

.menu-drop,
.menu-sub,
.example-menu,
.custom-slot-menu {
  background: rgba(24, 54, 31, .94);
  border-color: rgba(168, 210, 170, .35);
  box-shadow: 0 14px 32px rgba(13, 36, 18, .32), inset 0 1px rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

#main {
  z-index: 1;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
}

#blockly-panel,
#right-panel {
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-line);
  border-radius: 15px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  backdrop-filter: blur(14px) saturate(118%);
}

#blockly-panel { overflow: hidden; }

#right-panel {
  border-left: 1px solid var(--glass-edge);
  background: rgba(252, 249, 239, .76);
  overflow: hidden;
}

#ws-tabbar {
  background: linear-gradient(180deg, rgba(39, 91, 48, .93), rgba(29, 67, 37, .93));
  border-bottom: 1px solid rgba(255, 255, 255, .23);
  box-shadow: inset 0 1px rgba(255, 255, 255, .16);
}

.ws-tab {
  border-right-color: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .72);
}

.ws-tab:hover { background: rgba(255, 255, 255, .09); }

.ws-tab.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .12));
  color: #fff;
  box-shadow: inset 0 -3px #f5d98b, inset 0 1px rgba(255, 255, 255, .16);
}

#ws-add-tab { color: #d7efd8; }

.panel-tabs {
  background: rgba(255, 255, 255, .56);
  border-bottom: 1px solid rgba(82, 114, 73, .20);
  box-shadow: inset 0 1px rgba(255, 255, 255, .70);
}

.panel-tab { color: #4a624b; }
.panel-tab:hover { background: rgba(255, 255, 255, .42); }
.panel-tab.active {
  background: rgba(255, 255, 255, .72);
  border-bottom-color: var(--green-mid);
  color: var(--green-dark);
}

/* The toolbox keeps its strong category contrast but gains the glass finish. */
.blocklyToolboxDiv {
  background: linear-gradient(180deg, rgba(29, 60, 33, .96), rgba(41, 55, 37, .94)) !important;
  border-right: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 7px 0 20px rgba(31, 55, 32, .16), inset 0 1px rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.blocklyTreeRow {
  margin: 3px 7px !important;
  border-radius: 7px;
  color: rgba(255,255,255,.84) !important;
  transition: background .14s ease, transform .14s ease;
}

.blocklyTreeRow:hover { background: rgba(255,255,255,.08) !important; }
.blocklyTreeSelected {
  background: rgba(255,255,255,.14) !important;
  box-shadow: inset 3px 0 #e8b84b, inset 0 1px rgba(255, 255, 255, .16);
}

.blocklyTreeLabel {
  color: rgba(255,255,255,.86) !important;
  font-weight: 700 !important;
}

/* Keep code and console output dark for legibility, with softer framing. */
#console-toolbar,
#python-toolbar {
  background: linear-gradient(180deg, #26382b, #1a291e);
  border-color: rgba(255, 255, 255, .10);
}

#console-output,
#code-output,
.CodeMirror {
  box-shadow: inset 0 1px 10px rgba(0, 0, 0, .22);
}

#tab-console,
#tab-code,
#tab-help {
  inset: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 11px 25px rgba(22,55,29,.18), inset 0 1px rgba(255,255,255,.07);
  overflow: hidden;
}

#tab-console,
#tab-code {
  background: linear-gradient(145deg, rgba(25,48,28,.97), rgba(16,38,23,.98));
}

#tab-help {
  border-color: rgba(66,103,68,.18);
  background: rgba(255,252,244,.80);
  box-shadow: 0 11px 25px rgba(22,55,29,.14), inset 0 1px rgba(255,255,255,.78);
}

#console-toolbar { background: rgba(255,255,255,.035); }
#console-output { background: transparent; }
#console-input-row { background: rgba(7,20,10,.32); }
#console-input { background: transparent; }
#code-output { background: transparent; }
#help-content { background: transparent; }

#bottom-bar {
  z-index: 2;
  margin: 0 12px 9px;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(68, 49, 29, .92), rgba(86, 63, 34, .88));
  box-shadow: 0 7px 17px rgba(54, 47, 30, .18), inset 0 1px rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.modal-overlay {
  background: rgba(23, 44, 29, .46);
  -webkit-backdrop-filter: blur(7px) saturate(90%);
  backdrop-filter: blur(7px) saturate(90%);
}

.modal {
  border: 1px solid rgba(255, 255, 255, .68);
  background: rgba(255, 252, 243, .92);
  box-shadow: 0 24px 65px rgba(20, 49, 27, .30), inset 0 1px rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

.remote-control-modal,
.remote-setup,
.remote-drive-panel,
.remote-servo-panel,
.remote-servo-card,
.remote-status,
.titan-ble-assistant-card {
  border-color: rgba(76, 111, 70, .20) !important;
  box-shadow: 0 9px 24px rgba(34, 70, 39, .11), inset 0 1px rgba(255, 255, 255, .72);
}

@media (max-width: 720px) {
  #header { padding: 7px 8px 8px; }
  .toolbar { width: 100%; }
  #main { gap: 6px; padding: 6px; }
  #blockly-panel,
  #right-panel { border-radius: 10px; }
  #bottom-bar { margin: 0 6px 6px; border-radius: 8px; }
  .toolbar { padding-left: 4px; padding-right: 4px; }
}

@media (prefers-reduced-transparency: reduce) {
  #blockly-panel,
  #right-panel,
  .modal { background: #faf6ec; }
}