/* Trade Journal — themed to match nofomoo.com (light, Inter, green/black). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#ffffff;
  --bg-alt:#f8fafc;            /* light slate section */
  --card-bg:#ffffff;
  --border:#e5eae7;           /* card borders */
  --hair:#eef2f0;             /* faint dividers */
  --line:#d5ddd9;             /* stronger hairline from site */
  --ink:#171c1a;              /* near-black text */
  --text:#171c1a;
  --paper:#171c1a;            /* legacy alias */
  --muted:#5f6b66;
  --muted-2:#8a938f;
  --green:#149047;            /* brand green */
  --green-dark:#0f7a3a;
  --green-soft:rgba(20,144,71,0.10);
  --red:#e61919;             /* loss */
  --red-soft:rgba(230,25,25,0.10);
  --orange:#e97a0c;
  --orange-soft:rgba(233,122,12,0.10);
  /* semantic + legacy aliases used across pages */
  --primary:var(--green);
  --primary-2:var(--green-dark);
  --primary-soft:var(--green-soft);
  --win:var(--green);
  --win-soft:var(--green-soft);
  --loss:var(--red);
  --loss-soft:var(--red-soft);
  --brass:var(--green);
  --brass-soft:var(--green-soft);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 10px 30px rgba(16,24,40,.06);
  --shadow-lg:0 24px 48px -12px rgba(16,24,40,.14);
}
*{box-sizing:border-box;}
body{margin:0;}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100%;
}
/* very faint brand tints in the corners (kept subtle for a light UI) */
body::before,body::after{
  content:"";position:fixed;border-radius:50%;filter:blur(120px);z-index:0;pointer-events:none;
}
body::before{width:420px;height:420px;background:rgba(20,144,71,0.08);top:-160px;left:-140px;}
body::after{width:460px;height:460px;background:rgba(230,25,25,0.06);bottom:-200px;right:-140px;}

a{color:var(--green);text-decoration:none;}
a:hover{color:var(--green-dark);text-decoration:none;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px 80px;position:relative;z-index:1;}

/* ---------- Headings ---------- */
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 10px;}
h1.title{
  font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(28px,4.4vw,46px);
  line-height:1.05;margin:0 0 8px;letter-spacing:-0.02em;color:var(--ink);
}
h1.title em{font-style:normal;color:var(--green);}   /* "Start Trading." green */
.sub{color:var(--muted);font-size:15px;max-width:520px;line-height:1.6;margin:0;font-weight:400;}

/* ---------- Brand / logo ---------- */
.brand-logo{
  display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:16px;
  padding:.5rem;box-shadow:var(--shadow);border:1px solid var(--border);
}
.brand-logo img{display:block;width:100%;height:auto;border-radius:10px;}
.auth-logo{display:flex;width:fit-content;max-width:118px;margin:0 auto 1.3rem;animation:tj-float 6s ease-in-out infinite;}
@keyframes tj-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.bar-logo{max-width:40px;border-radius:11px;padding:5px;}

/* ---------- App nav bar ---------- */
.appbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;margin:20px 0 2px;border:1px solid var(--border);border-radius:16px;
  background:#fff;box-shadow:var(--shadow-sm);
}
.appbar .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink);}
.appbar .brand em{font-style:normal;color:var(--green);}
.appbar nav{display:flex;align-items:center;gap:16px;font-size:13px;flex-wrap:wrap;font-weight:500;}
.appbar nav .who{color:var(--muted);}
.appbar nav .who b{color:var(--ink);font-weight:700;}
.pill{
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--green-soft);color:var(--green);border-radius:20px;padding:3px 10px;background:var(--green-soft);
}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm);}
.card h2{font-weight:700;font-size:19px;margin:0 0 20px;display:flex;align-items:center;gap:10px;color:var(--ink);}
.card h2 .num{font-size:11px;font-weight:700;color:var(--green);border:1px solid var(--green-soft);background:var(--green-soft);border-radius:6px;padding:2px 7px;}

/* ---------- Forms ---------- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
input, select, textarea{
  width:100%;background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:11px 13px;border-radius:12px;font-family:'Inter',sans-serif;font-size:14px;transition:all .2s ease;outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft);}
input::placeholder,textarea::placeholder{color:var(--muted-2);}
select option{background:#fff;color:var(--ink);}
textarea{resize:vertical;min-height:58px;}

.dir-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.dir-toggle button{
  padding:11px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--muted);
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s ease;
}
.dir-toggle button:hover{border-color:var(--muted-2);}
.dir-toggle button.active[data-dir="buy"]{background:var(--green-soft);border-color:var(--green);color:var(--green-dark);}
.dir-toggle button.active[data-dir="sell"]{background:var(--red-soft);border-color:var(--red);color:var(--red);}

.submit-btn{
  width:100%;margin-top:6px;padding:13px;border:none;border-radius:12px;cursor:pointer;background:var(--green);color:#fff;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;box-shadow:0 4px 14px rgba(20,144,71,0.25);transition:all .2s ease;
}
.submit-btn:hover{background:var(--green-dark);transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,144,71,0.32);}
.submit-btn:active{transform:translateY(0);}
.submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

.live-preview{
  margin-top:16px;padding:12px 15px;background:var(--bg-alt);border:1px solid var(--hair);border-radius:12px;
  font-size:13px;color:var(--muted);display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;
}
.live-preview b{color:var(--ink);font-weight:700;}

/* ---------- Auth ---------- */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative;z-index:1;}
.auth-card{
  width:100%;max-width:408px;background:#fff;border:1px solid var(--border);border-radius:22px;padding:34px 32px;
  box-shadow:var(--shadow-lg);transform:translateY(16px);opacity:0;animation:tj-in .7s forwards ease-out;
}
@keyframes tj-in{to{transform:translateY(0);opacity:1;}}
.auth-card .eyebrow{text-align:center;}
.auth-card h1.title{font-size:30px;text-align:center;margin-bottom:6px;}
.auth-card .sub{text-align:center;margin:0 auto 24px;font-size:14px;}
.auth-alt{text-align:center;margin-top:18px;font-size:13px;color:var(--muted);}

/* ---------- Alerts ---------- */
.alert{padding:12px 15px;border-radius:12px;font-size:13.5px;margin-bottom:16px;line-height:1.45;border:1px solid var(--border);background:var(--bg-alt);color:var(--ink);}
.alert.error{border-color:rgba(230,25,25,0.35);color:#b3140f;background:var(--red-soft);}
.alert.success{border-color:rgba(20,144,71,0.35);color:var(--green-dark);background:var(--green-soft);}
.alert.info{border-color:var(--line);color:var(--ink);background:var(--bg-alt);}

/* ---------- Ticker strip ---------- */
.ticker{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:20px;}
.tick{padding:20px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);}
.tick .label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:700;}
.tick .value{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.01em;}
.tick .value.pos{color:var(--green);}
.tick .value.neg{color:var(--red);}

/* ---------- Board / equity ---------- */
.board{display:grid;grid-template-columns:340px 1fr;gap:12px;margin-top:12px;}
.curve-card{display:flex;flex-direction:column;}
canvas#curve{width:100%;height:220px;display:block;}
.curve-empty{color:var(--muted);font-size:14px;padding:40px 0;text-align:center;}

/* ---------- History / tables ---------- */
.history{background:#fff;padding:26px;margin-top:12px;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm);}
.history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.history-head h2{font-weight:700;font-size:19px;margin:0;color:var(--ink);}
.tools{display:flex;gap:8px;}
.tools button{
  background:#fff;border:1px solid var(--line);color:var(--muted);padding:9px 15px;border-radius:10px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s ease;
}
.tools button:hover{border-color:var(--green);color:var(--green-dark);}

table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:11px 12px;border-bottom:1px solid var(--border);font-weight:700;}
tbody td{padding:13px 12px;border-bottom:1px solid var(--hair);font-size:14px;vertical-align:middle;font-variant-numeric:tabular-nums;color:var(--ink);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--bg-alt);}
.pair-cell{font-weight:700;}
.note-cell{font-size:13px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pnl.pos{color:var(--green);}
.pnl.neg{color:var(--red);}

.stamp{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;border:1.5px solid currentColor;}
.stamp.win{color:var(--green);}
.stamp.loss{color:var(--red);}

.del-btn{background:none;border:none;color:var(--muted-2);cursor:pointer;font-size:15px;opacity:.7;transition:all .18s ease;}
.del-btn:hover{opacity:1;color:var(--red);}
.empty-row td{text-align:center;color:var(--muted);padding:50px 0;}

/* ---------- Admin buttons / badges ---------- */
.btn{font-size:11.5px;font-weight:600;padding:8px 13px;border-radius:10px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:'Inter',sans-serif;transition:all .18s ease;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.btn.approve{border-color:var(--green);color:var(--green-dark);background:var(--green-soft);}
.btn.reject,.btn.danger{border-color:var(--red);color:var(--red);background:var(--red-soft);}
.badge{font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:20px;border:1px solid var(--border);color:var(--muted);}
.badge.pending{color:var(--orange);border-color:rgba(233,122,12,0.35);background:var(--orange-soft);}
.badge.approved{color:var(--green);border-color:rgba(20,144,71,0.35);background:var(--green-soft);}
.badge.rejected{color:var(--red);border-color:rgba(230,25,25,0.35);background:var(--red-soft);}
.badge.role-admin{color:var(--green);border-color:var(--green-soft);background:var(--green-soft);}

.tabs{display:flex;gap:10px;margin:22px 0 4px;font-size:13px;}
.tabs a{padding:9px 16px;border:1px solid var(--border);border-radius:12px;color:var(--muted);background:#fff;font-weight:600;}
.tabs a.active{border-color:var(--green);color:var(--green-dark);background:var(--green-soft);}

footer{text-align:center;color:var(--muted);font-size:12px;padding-top:30px;}

@media (max-width: 820px){
  .board{grid-template-columns:1fr;}
  .ticker{grid-template-columns:repeat(2,1fr);}
  .row2{grid-template-columns:1fr;}
  .appbar{flex-direction:column;align-items:flex-start;}
}