/* ============================================================
   TOKENS / BASE
   ============================================================ */
:root{
  --brand-600:#2d6fe6;
  --brand-700:#2057b8;
  --brand-800:#1a4694;

  --text-on:#ffffff;
  --shadow:0 6px 20px rgba(16,33,70,.15);
  --card-bg:rgba(10,25,60,0.9);
  --card-border:rgba(255,255,255,0.08);

  --bg-dark:#050b1d;
  --bg-panel:#0d1a3a;
  --bg-panel-blur:rgba(10,25,60,0.95);

  --border-soft:rgba(255,255,255,0.18);

  --handle:#00eaff;
  --handle-size:10px;

  --transition:0.18s ease-out;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Arial, sans-serif;
}

/* ============================================================
   PAGE + APP LAYOUT
   ============================================================ */

body {
  margin:0;
  padding:0;
  background:radial-gradient(circle at top, #273c75 0, #050b1d 55%);
  color:#e0e6f0;
  overflow:hidden;
}

/* App wrapper sits under navbar */
#app-wrapper {
  position:fixed;
  top:64px; /* matches desktop navbar height */
  left:0;
  right:0;
  bottom:0;
  display:flex;
  overflow:hidden;
}

/* ============================================================
   DATAPLATE NAVBAR (MATCHES TROUBLESHOOTING WIZARD)
   ============================================================ */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  width:100%;
  backdrop-filter:blur(10px);
}

.site-nav{
  width:100%;
  font:700 18px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text-on);
  background:linear-gradient(90deg, var(--brand-700), var(--brand-600));
  box-shadow:var(--shadow);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  width:100%;
  padding:0 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--text-on);
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
}

.brand-logo{
  width:28px;
  height:28px;
  display:inline-block;
  border-radius:6px;
  background:url('https://www.dataplate.co.uk/images/dp.png') center/contain no-repeat;
}

.brand span{
  font-size:20px;
}

.menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.25rem;
  margin:0;
  padding:0;
}

.menu a{
  display:inline-block;
  padding:12px 16px;
  color:var(--text-on);
  text-decoration:none;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.3px;
  transition:background-color .15s ease, transform .15s ease;
}

.menu a:hover,
.menu a:focus-visible{
  background:rgba(255,255,255,.15);
  outline:none;
}

.menu a:active{
  transform:translateY(1px);
}

.nav-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--text-on);
  width:44px;
  height:44px;
  border-radius:12px;
  display:none;             /* desktop hidden */
  place-items:center;
  cursor:pointer;
}

.nav-toggle:hover,
.nav-toggle:focus-visible{
  background:rgba(255,255,255,.12);
  outline:none;
}

.nav-toggle svg{
  width:22px;
  height:22px;
}

/* Mobile drawer base */
.drawer{
  display:none;
}

/* Mobile styles */
@media (max-width:800px){
  .nav-inner{
    height:56px;
    padding-right:calc(12px + env(safe-area-inset-right));
    padding-left:calc(12px + env(safe-area-inset-left));
  }
  .menu{ display:none; }
  .drawer{ display:block; }
  .nav-toggle{ display:grid; margin-right:12px; }

  .drawer-panel{
    position:fixed;
    top:56px;
    left:0;
    right:0;
    bottom:0;
    background:#2057b8; /* solid */
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    text-align:left;
    z-index:10000;
  }
  .drawer.open .drawer-panel{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .drawer ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  .drawer a{
    display:block;
    padding:16px 18px;
    background:#2057b8;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    letter-spacing:.2px;
    text-align:left;
    font-size:17px;
    line-height:1.4;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .drawer a:hover,
  .drawer a:focus-visible{
    background:#1a4694;
    outline:none;
  }

  /* App wrapper under shorter mobile navbar */
  #app-wrapper{
    top:56px;
  }
}

/* ============================================================
   TOOL PANEL (LEFT)
   ============================================================ */

#tool-panel {
  width:240px;
  background:var(--bg-panel-blur);
  border-right:1px solid var(--border-soft);
  padding:14px;
  overflow-y:auto;
}

#tool-panel h2 {
  margin:0 0 1rem 0;
  font-size:1.25rem;
  font-weight:800;
}

#tool-panel h3 {
  margin:1rem 0 0.4rem;
  font-size:0.98rem;
  opacity:0.8;
}

.tool-divider {
  border-top:1px solid var(--border-soft);
  margin:1rem 0;
}

.tool-btn,
.shape-btn {
  width:100%;
  padding:0.55rem 0.7rem;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-soft);
  color:white;
  font-weight:700;
  margin-bottom:.45rem;
  border-radius:8px;
  cursor:pointer;
  font-size:0.9rem;
  text-align:left;
  transition:background-color var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.tool-btn:hover,
.shape-btn:hover {
  background:rgba(255,255,255,0.12);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}

.tool-active {
  background:linear-gradient(135deg,var(--brand-700),var(--brand-600));
  border-color:rgba(0,0,0,0.4);
  box-shadow:0 6px 16px rgba(3,9,30,0.7);
}

/* ============================================================
   PROPERTIES PANEL (RIGHT)
   ============================================================ */

#properties-panel {
  width:260px;
  background:var(--bg-panel-blur);
  border-left:1px solid var(--border-soft);
  padding:14px;
  overflow-y:auto;
}

#properties-panel h2 {
  margin:0 0 0.5rem;
  font-size:1.25rem;
  font-weight:800;
}

.prop-hint{
  font-size:0.8rem;
  color:rgba(220,230,255,0.8);
  margin-bottom:0.7rem;
}

.prop-row {
  margin-bottom:0.8rem;
}

.prop-row label {
  display:block;
  opacity:0.75;
  margin-bottom:0.25rem;
  font-size:0.85rem;
}

.prop-row input {
  width:100%;
  padding:0.35rem 0.45rem;
  background:rgba(255,255,255,0.07);
  border:1px solid var(--border-soft);
  color:white;
  border-radius:6px;
  font-size:0.9rem;
}

.prop-row input:focus{
  outline:none;
  border-color:var(--brand-600);
  box-shadow:0 0 0 1px rgba(45,111,230,0.7);
}

.prop-small{
  margin-top:0.25rem;
  font-size:0.82rem;
}

.prop-delete{
  margin-top:0.8rem;
  background:#c0392b;
  border-color:#962d22;
}

/* Scrollbars */
#tool-panel::-webkit-scrollbar,
#properties-panel::-webkit-scrollbar {
  width:8px;
}

#tool-panel::-webkit-scrollbar-track,
#properties-panel::-webkit-scrollbar-track {
  background:rgba(255,255,255,0.04);
}

#tool-panel::-webkit-scrollbar-thumb,
#properties-panel::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,0.2);
  border-radius:4px;
}

/* ============================================================
   CANVAS / DRAWING AREA (CENTER)
   ============================================================ */

#canvas-container {
  flex:1;
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at top, #223a7a 0, #050b1d 60%);
  user-select:none;
}

#canvas {
  width:100%;
  height:100%;
  cursor:default;
}

#canvas.grabbing {
  cursor:grabbing;
}

/* Grid lines */
.grid-line {
  stroke:#385080;
  stroke-width:0.5;
  opacity:0.35;
}

/* ============================================================
   SHAPES / LABELS / DIMENSIONS
   ============================================================ */

.shape-rect {
  stroke:#ffffff;
  stroke-width:1.5;
}

.shape-label {
  fill:white;
  font-size:14px;
  text-anchor:middle;
  dominant-baseline:middle;
  pointer-events:none;
}

.dim-label {
  fill:#ffffff;
  font-size:11px;
  opacity:0.8;
  text-anchor:middle;
  pointer-events:none;
}

/* Selected outline */
.shape.selected .shape-rect {
  stroke:#00ffff !important;
  stroke-width:2 !important;
}

/* ============================================================
   RESIZE HANDLES
   ============================================================ */

.handle {
  fill:var(--handle);
  stroke:#000;
  stroke-width:1;
  width:var(--handle-size);
  height:var(--handle-size);
  rx:2;
  ry:2;
  cursor:pointer;
}

.handle.nw { cursor:nwse-resize; }
.handle.ne { cursor:nesw-resize; }
.handle.sw { cursor:nesw-resize; }
.handle.se { cursor:nwse-resize; }
.handle.n  { cursor:ns-resize; }
.handle.s  { cursor:ns-resize; }
.handle.e  { cursor:ew-resize; }
.handle.w  { cursor:ew-resize; }