/* Trendlines & Key Levels — styles. Loaded globally by Dash from /assets, so every rule is
   scoped under .tkl-app. Shared node tokens: panels rgba(0,0,0,0.6), chips rgba(255,255,255,0.06),
   radius 10px, text #e8e8e8, muted #9fb3c8, headings #cfefff, accent #f0a030.
   Layout: slim top bar + near full-screen chart; three drawers (.tkl-dr left / top / right),
   always mounted and slid in with a CSS class (.open). */

.tkl-app { color: #e8e8e8; font-size: 13px; position: relative; display: flex; gap: 10px; height: calc(100vh - 6vh); }
.tkl-app * { box-sizing: border-box; }

/* ---------- top bar ---------------------------------------------------------------- */
.tkl-top { display: flex; align-items: center; gap: 8px; padding: 0 200px 6px 0; min-height: 40px; flex-wrap: wrap; }
.tkl-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #e8e8e8;
           border-radius: 10px; padding: 5px 12px; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.tkl-btn:hover { border-color: #f0a030; color: #f0a030; }
.tkl-btn.acc { background: rgba(240,160,48,0.12); border-color: rgba(240,160,48,0.55); color: #f5d6a3; }
.tkl-btn i { margin-right: 3px; }
.tkl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; margin-left: 10px; }
.tkl-tk { color: #cfefff; font-size: 1.15rem; font-weight: 700; letter-spacing: .3px; }
.tkl-nm { color: #e8e8e8; font-size: .85rem; }
.tkl-px { font-family: Consolas, monospace; font-size: .95rem; color: #f2f7fb; font-variant-numeric: tabular-nums; }
.tkl-chg { font-family: Consolas, monospace; font-size: .8rem; }
.tkl-chg.pos { color: #5fcf8f; }
.tkl-chg.neg { color: #e06a6a; }
.tkl-chip { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 2px 9px; font-size: .72rem; color: #cfd9e3;
            white-space: nowrap; }
.tkl-chip.acc { background: rgba(240,160,48,0.10); color: #f5d6a3; border: 1px solid rgba(240,160,48,0.4);
                max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.tkl-chip.fr { border: 1px solid rgba(255,255,255,0.14); }
.tkl-srow { display: flex; align-items: center; gap: 8px; height: 30px; margin-left: auto; }
.tkl-top { flex-wrap: nowrap; }
.tkl-top .tkl-head { overflow: hidden; flex-wrap: nowrap; }
.tkl-top .tkl-status { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tkl-status { color: #9fb3c8; font-size: .72rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tkl-ibtn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #9fb3c8; border-radius: 8px;
            width: 30px; height: 28px; cursor: pointer; }
.tkl-ibtn:hover { color: #f0a030; border-color: #f0a030; }
.tkl-prog { display: inline-block; width: 90px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.tkl-prog > span { display: block; height: 100%; background: #f0a030; }
.tkl-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(240,160,48,0.3); border-top-color: #f0a030;
            animation: tkl-rot .8s linear infinite; display: inline-block; }
@keyframes tkl-rot { to { transform: rotate(360deg); } }
.tkl-cap { color: #9fb3c8; font-size: .66rem; margin-left: 6px; flex: 1 1 300px; min-width: 0; }
.tkl-chart-wrap { border-radius: 10px; overflow: hidden; flex: 1 1 auto; min-height: 0; position: relative; }

/* ---------- drawers ------------------------------------------------------------------ */
.tkl-dr { position: fixed; z-index: 10020; background: rgba(10,15,20,0.97); border: 1px solid rgba(255,255,255,0.1);
          box-shadow: 0 10px 40px rgba(0,0,0,0.6); transition: transform .28s ease, visibility .28s; visibility: hidden;
          display: flex; flex-direction: column; }
.tkl-dr.open { visibility: visible; transform: none !important; }
.tkl-dr.left { top: 0; left: 0; bottom: 0; width: min(900px, 96vw); transform: translateX(-102%); border-radius: 0 12px 12px 0; }
.tkl-dr.right { top: 0; right: 0; bottom: 0; width: min(760px, 96vw); transform: translateX(102%); border-radius: 12px 0 0 12px; }
.tkl-dr.top { top: 0; left: 0; right: 0; max-height: 72vh; transform: translateY(-102%); border-radius: 0 0 12px 12px; }
.tkl-dr-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 16px 6px; }
.tkl-dr-t { color: #cfefff; font-weight: 600; font-size: 1rem; }
.tkl-dr-s { color: #9fb3c8; font-size: .72rem; }
.tkl-dr-b { padding: 4px 16px 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.tkl-x { background: transparent; border: none; color: #e8e8e8; font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; }
.tkl-x:hover { color: #f0a030; }

/* ---------- controls ----------------------------------------------------------------- */
.tkl-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-end; background: rgba(255,255,255,0.05);
           border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.tkl-ctrl .tkl-k, .tkl-k { color: #9fb3c8; font-size: .66rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.tkl-ctrl { margin-bottom: 6px; }
.tkl-ctrl.w-sec { width: 250px; }
.tkl-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tkl-pills label { margin: 0; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
                   border-radius: 14px; padding: 3px 11px; font-size: .76rem; color: #e8e8e8; user-select: none; }
.tkl-pills label:has(input:checked) { border-color: #f0a030; color: #f0a030; background: rgba(240,160,48,0.08); }
.tkl-pills input { display: none; }
.tkl-in { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #e8e8e8;
          height: 30px; padding: 0 10px; font-size: .8rem; width: 150px; outline: none; }
.tkl-in:focus { border-color: #f0a030; }
.tkl-app .Select-control { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important;
                           border-radius: 8px !important; min-height: 30px; }
.tkl-app .Select-value-label, .tkl-app .Select-input > input { color: #e8e8e8 !important; font-size: .8rem; }
.tkl-app .Select-placeholder { line-height: 28px !important; color: #9fb3c8; font-size: .8rem; }
.tkl-app .Select--multi .Select-value { background: rgba(240,160,48,0.12); border-color: rgba(240,160,48,0.45);
                                        color: #f5d6a3; border-radius: 10px; font-size: .72rem; }
.tkl-app .Select-menu-outer { background: #141a21 !important; border: 1px solid rgba(255,255,255,0.15) !important;
                              border-radius: 8px !important; z-index: 10060 !important; }
.tkl-app .VirtualizedSelectOption { color: #e8e8e8; font-size: .8rem; }
.tkl-app .VirtualizedSelectFocusedOption { background: rgba(240,160,48,0.18) !important; }
.tkl-app .Select-arrow { border-top-color: #9fb3c8 !important; }
.tkl-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 6px; }
.tkl-h { color: #cfefff; font-weight: 600; font-size: .95rem; }
.tkl-sub { color: #9fb3c8; font-size: .72rem; }
.tkl-dr.left .dash-table-container .dash-spreadsheet-container td { cursor: pointer; }

/* items (single lines / patterns) */
.tkl-irow { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.tkl-irow .tkl-k { margin: 0; }
.tkl-mini { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #9fb3c8; border-radius: 8px;
            font-size: .68rem; padding: 1px 8px; cursor: pointer; }
.tkl-mini:hover { color: #f0a030; border-color: #f0a030; }
.tkl-items { display: flex; flex-direction: column; gap: 3px; max-height: 26vh; overflow-y: auto; }
.tkl-items label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .76rem; color: #e8e8e8; cursor: pointer;
                   background: rgba(255,255,255,0.03); border-radius: 8px; padding: 3px 8px; }
.tkl-items input { accent-color: #f0a030; }

/* ---------- frames drawer ------------------------------------------------------------ */
.tkl-crumbs { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; min-width: 0; margin-bottom: 6px; }
.tkl-crumb { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #e8e8e8; border-radius: 12px;
             padding: 2px 9px; font-size: .72rem; cursor: pointer; white-space: nowrap; }
.tkl-crumb:hover { border-color: #f0a030; }
.tkl-crumb.on { border-color: #f0a030; color: #f0a030; background: rgba(240,160,48,0.08); }
.tkl-crumb.kid { border-style: dashed; }
.tkl-crumb .rg { color: #9fb3c8; }
.tkl-sep { color: #5d6b78; }
.tkl-zi { color: #9fb3c8; font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; margin-left: 8px; }
.tkl-fr-row { display: flex; gap: 12px; align-items: flex-start; }
.tkl-fr-main { flex: 1 1 auto; min-width: 0; }
.tkl-finfo { flex: 0 0 300px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
             padding: 8px 12px; min-height: 120px; }
.tkl-fi { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; padding: 2px 0;
          border-bottom: 1px solid rgba(255,255,255,0.05); }
.tkl-fi .fk { color: #9fb3c8; white-space: nowrap; }
.tkl-fi .fv { color: #e8e8e8; text-align: right; }
@media (max-width: 900px) { .tkl-fr-row { flex-direction: column; } .tkl-finfo { flex-basis: auto; width: 100%; } }
.tkl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .68rem; color: #9fb3c8; margin: 2px 0 0 2px; }
.tkl-lg { display: inline-flex; align-items: center; gap: 5px; }
.tkl-lg.hint { font-style: italic; opacity: .75; }
.tkl-lg .sw { width: 16px; height: 8px; border-radius: 3px; display: inline-block; }

/* ---------- notes -------------------------------------------------------------------- */
.tkl-notes { margin-top: 10px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 8px 14px; }
.tkl-notes summary { color: #9fb3c8; cursor: pointer; font-size: .78rem; }
.tkl-notes summary i { color: #f0a030; }
.tkl-notes-b { color: #cfd9e3; font-size: .76rem; }
.tkl-notes-b h5 { color: #cfefff; font-size: .82rem; margin: 10px 0 2px; }
.tkl-notes-b p { margin: 0 0 4px; line-height: 1.45; }

/* ---------- docked panels (3rd iteration) --------------------------------------------
   Frames (top) and Lines (right) sit in the flow and take their space from the chart,
   which is responsive and resizes to what is left. Browse stays an overlay. */
.tkl-col { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
.tkl-dr.dock { position: relative; z-index: 1; box-shadow: none; transform: none !important; transition: none;
               background: rgba(10,15,20,0.85); visibility: visible; overflow: hidden; }
.tkl-dr.top.dock { top: auto; left: auto; right: auto; max-height: 0; border-width: 0; border-radius: 10px; flex: 0 0 auto; margin-bottom: 0; }
.tkl-dr.top.dock.open { max-height: 62vh; border-width: 1px; margin-bottom: 6px; }
.tkl-dr.top.dock .tkl-dr-b { overflow-y: auto; }
.tkl-dr.right.dock { top: auto; right: auto; bottom: auto; width: 0; flex: 0 0 auto; border-width: 0; border-radius: 10px;
                     margin-top: 46px; }
.tkl-dr.right.dock.open { width: 360px; border-width: 1px; }
.tkl-dr.right.dock.open:has(details[open]) { width: min(820px, 60vw); }
.tkl-dr.right.dock .tkl-dr-b, .tkl-dr.right.dock .tkl-dr-h { min-width: 330px; }
.tkl-chartbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.tkl-btn.sm { padding: 3px 10px; font-size: .74rem; }
.tkl-chartbar .tkl-pills label { font-size: .7rem; padding: 2px 9px; }
.tkl-opt { display: inline-flex; align-items: center; gap: 6px; }
.tkl-app i.sw, .tkl-opt .sw, .tkl-fi-h .sw, .tkl-chip .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; margin-right: 5px; vertical-align: -1px; }
.tkl-fi-h { display: flex; align-items: center; }
.tkl-crumb { border-width: 1.5px; }
.tkl-crumb.on { color: #f2f7fb; background: rgba(255,255,255,0.10); font-weight: 600; }
.tkl-tbl-det { margin-top: 10px; }
.tkl-tbl-det summary { color: #9fb3c8; cursor: pointer; font-size: .74rem; margin-bottom: 6px; }
.tkl-dr.right.dock .tkl-ctrl { margin-bottom: 10px; }