/*
Theme Name: Mekongzon Skynez
Theme URI: https://mekongzon.com
Author: Mekongzon Team
Author URI: https://mekongzon.com
Description: Skynez – Intelligent Trade System for Mekongzon. Unified AI Trading and Analytics Dashboard with 3-column layout (15/60/25), 62/38 chart split, right Dock, and OpenAI integration.
Version: 5.1.1
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mekongzon-skynez
Tags: ai, trading, analytics, dashboard, dark-mode, responsive
*/

:root{
  --brand:#0a7cff; --brand-2:#66aaff;
  --bg:#ffffff; --surface:#f6f8fc;
  --text:#0f172a; --muted:#64748b;
  --border:#e5e7eb;
  --header:72px; --adminbar:0px;
  --gap:14px; --radius:12px; --radius-lg:16px;
  --shadow:0 4px 16px rgba(0,0,0,.05);
  --font-ui:"Mekongzon Sans",system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --brand:#66aaff; --bg:#0b0f14; --surface:#0f141b; --text:#e5e7eb; --muted:#9aa4b2; --border:#243043; --shadow:0 4px 16px rgba(0,0,0,.35); }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100vh; width:100%; margin:0; padding:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--font-ui); }

/* Page fade-in */
body{ opacity:0; animation: mzFade .3s ease forwards; }
@keyframes mzFade { from{opacity:0} to{opacity:1} }

/* HEADER */
.app-header{
  position:fixed; top:var(--adminbar,0); left:0; right:0; height:var(--header);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  z-index:100;
}
@media (prefers-color-scheme: dark){ .app-header{ background:linear-gradient(180deg,#0f141b,#0d1117); } }

.app-header .left{ display:flex; align-items:center; gap:12px; min-width:260px; }
.app-header .logo-box{ display:flex; align-items:center; gap:10px; }
.app-header .title{ font-weight:800; letter-spacing:.2px; white-space:nowrap; }
.app-header .context{ font-size:12px; color:var(--muted); padding:4px 8px; border:1px solid var(--border); border-radius:999px; }

/* Center search full-width aligned to middle column */
.app-header .center{ flex:1; display:flex; align-items:center; justify-content:center; }
.search-wrap{
  width:calc(60vw - 2*var(--gap));
  max-width:1200px;
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:10px 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}
.search-wrap input{ border:none; outline:none; background:transparent; color:var(--text); width:100%; font-size:15px; }
.search-wrap:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(10,124,255,.12); }

/* Right controls */
.app-header .right{ display:flex; align-items:center; gap:8px; }
.pill{ padding:7px 10px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.iconbtn{ border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:6px 10px; cursor:pointer; transition:.2s; }
.iconbtn:hover{ border-color:var(--brand); background:rgba(10,124,255,.06); box-shadow:0 0 0 3px rgba(10,124,255,.08); }

/* Admin-bar push */
.admin-bar .app-header{ top:32px; }
@media (max-width:782px){ .admin-bar .app-header{ top:46px; } }

/* LAYOUT */
.app-workspace{
  position:fixed; top:calc(var(--header) + var(--adminbar,0)); left:0; right:0; bottom:0;
  display:grid; grid-template-columns:15% 60% 25%;
  gap:var(--gap); padding:var(--gap);
  background:var(--surface);
  height:calc(100vh - var(--header) - var(--adminbar,0));
  overflow:hidden;
  border-right:1px solid var(--border); /* prevent right overflow look */
}

/* Columns */
.app-col{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden; }

/* SIDEBAR LEFT */
.sidebar{ overflow-y:auto; display:flex; flex-direction:column; }
.sidebar .brand-text{ padding:12px 12px 6px 12px; border-bottom:1px solid var(--border); }
.sidebar .brand-text .t1{ font-weight:800; color:var(--brand); }
.sidebar .brand-text .t2{ font-size:12px; color:var(--muted); }

.sidebar .group{ padding:10px 12px; font-weight:800; color:var(--muted); border-bottom:1px solid var(--border); }
.nav{ display:grid; gap:6px; padding:10px; }
.nav a{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:inherit; background:var(--bg); transition:.2s ease; }
.nav a:hover{ border-color:var(--brand); background:rgba(10,124,255,.06); }

.sidebar-footer{ margin-top:auto; padding:12px; border-top:1px solid var(--border); background:var(--bg); }
.sidebar-footer-menu{ list-style:none; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap; }
.sidebar-footer-menu a{ color:var(--muted); text-decoration:none; font-size:13px; }
.sidebar-footer-menu a:hover{ color:var(--text); }
.copy{ margin-top:8px; font-size:12px; color:var(--muted); }

/* MAIN CENTER: 62/38 */
.main{ display:grid; grid-template-rows:62fr 38fr; gap:10px; min-height:0; padding:0; background:transparent; border:none; box-shadow:none; }
.card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:0; }
.card-header{ padding:10px 12px; border-bottom:1px solid var(--border); font-weight:800; display:flex; align-items:center; justify-content:space-between; }
.card-body{ height:100%; padding:0; }

.chart-wrap{ height:100%; width:100%; overflow:hidden; background:var(--surface); border-radius:var(--radius); box-shadow:inset 0 0 0 1px var(--border); padding:6px; }
.chart-wrap iframe{ width:100%; height:100%; border:0; display:block; }

/* Action Board */
.action-board{ display:flex; flex-direction:column; height:100%; }
.action-tabs{ display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--border); background:var(--bg); }
.action-tabs button{ flex:1; border:1px solid var(--border); background:var(--surface); padding:8px 10px; border-radius:10px; font-weight:600; cursor:pointer; transition:.2s; }
.action-tabs button.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.action-body{ flex:1; overflow:auto; padding:10px; }
.action-footer{ padding:8px 10px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }

.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:8px 10px; border-bottom:1px dashed var(--border); text-align:left; }
.table th{ color:var(--muted); font-weight:800; }

/* SKYNEZ DOCK (RIGHT) */
.skynez{ display:flex; flex-direction:column; border-radius:var(--radius-lg); background:var(--bg); border:1px solid var(--border); box-shadow:0 6px 20px rgba(0,0,0,.05); overflow:hidden; }
.skynez-head{ padding:12px 12px; border-bottom:1px solid var(--border); font-weight:800; display:flex; align-items:center; justify-content:space-between; }
.skynez-tabs{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--border); }
.skynez-tabs button{ flex:1; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 0; font-weight:600; cursor:pointer; transition:.2s; }
.skynez-tabs button.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* Smooth transitions for bodies */
.skynez-body{ flex:1; overflow:auto; padding:12px; position:relative; visibility:hidden; opacity:0; pointer-events:none; transform:translateX(8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.skynez-body.active{ visibility:visible; opacity:1; pointer-events:auto; transform:none; transition-delay:0s; }

.msg{ display:flex; gap:10px; margin-bottom:8px; }
.msg .avatar{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:#fff; font-size:.8rem; flex:0 0 26px; }
.msg.user .avatar{ background:#888; }
.bubble{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--bg); max-width:75%; }
.msg.user .bubble{ margin-left:auto; background:var(--brand); color:#fff; border-color:transparent; }

.skynez-input{ border-top:1px solid var(--border); background:var(--surface); display:flex; align-items:center; gap:8px; padding:10px 12px; }
.skynez-input input{ flex:1; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:transparent; color:var(--text); outline:none; }
.skynez-input button{ border:none; background:var(--brand); color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; }

/* Responsive */
@media (max-width:1200px){
  .app-workspace{ grid-template-columns:0 65% 35%; }
  .sidebar{ display:none; }
}
@media (max-width:900px){
  .app-workspace{ grid-template-columns:100% 0 0; }
  .skynez{ display:none; }
  .app-header .center .search-wrap{ width: calc(100vw - 24px); }
}