/* ============================================================
   FD Business Solutions - 3D UI Theme
   ============================================================ */
:root {
  --bg: #eef1f8;
  --panel: #ffffff;
  --ink: #131a2e;
  --muted: #7a849c;
  --line: #e3e8f2;
  --blue: #1a3bd8;
  --blue-2: #2f5bff;
  --blue-dark: #10259c;
  --green: #12b76a;
  --green-bg: #e7f9f0;
  --red: #e5484d;
  --red-bg: #fdecec;
  --orange: #f2790b;
  --orange-bg: #fef1e3;
  --gold: #c9971f;
  --shadow-card: 0 1px 0 #fff inset, 0 10px 25px -8px rgba(19,26,46,.14), 0 3px 8px -4px rgba(19,26,46,.10);
  --shadow-deep: 0 18px 40px -12px rgba(16,37,156,.35);
  --radius: 16px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:linear-gradient(160deg,#f2f4fb 0%, #e8ecf7 60%, #e2e7f5 100%); color:var(--ink); min-height:100vh; }
h1,h2,h3,.brand-text,.stat-value { font-family:'Sora',sans-serif; }
a { color:var(--blue); text-decoration:none; }

/* ---------- Layout ---------- */
.layout { display:flex; min-height:100vh; }
.content { flex:1; padding:28px 32px; max-width:1250px; }

/* ---------- Sidebar (3D glass) ---------- */
.sidebar {
  width:245px; flex-shrink:0; padding:22px 16px; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#ffffff 0%,#f6f8fe 100%);
  border-right:1px solid var(--line);
  box-shadow: 8px 0 24px -16px rgba(19,26,46,.18);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand { display:flex; align-items:center; gap:11px; margin-bottom:26px; }
.brand-cube {
  width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--blue-2),var(--blue-dark));
  color:#fff; font-family:'Sora'; font-weight:800; font-size:15px;
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.22) inset, 0 10px 18px -6px rgba(26,59,216,.5);
  transform:perspective(300px) rotateX(6deg);
}
.brand-text { font-size:17px; font-weight:800; line-height:1.1; }
.brand-text b { color:var(--blue); }
.brand-text small { display:block; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.menu-label { font-size:10px; letter-spacing:2px; color:#a7b0c5; font-weight:700; margin:4px 10px 10px; }
.menu { display:flex; flex-direction:column; gap:5px; }
.menu a {
  display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:12px;
  color:#3d475f; font-weight:600; font-size:14px; transition:all .16s ease;
  border:1px solid transparent;
}
.menu a i { font-style:normal; width:18px; text-align:center; opacity:.75; font-size:13px; }
.menu a:hover { background:#eef2fc; transform:translateX(2px); }
.menu a.active {
  background:linear-gradient(145deg,var(--blue-2),var(--blue-dark)); color:#fff;
  box-shadow: 0 2px 0 rgba(255,255,255,.3) inset, 0 -3px 0 rgba(0,0,0,.25) inset, 0 12px 20px -8px rgba(26,59,216,.55);
  transform:translateX(3px);
}
.user-chip {
  margin-top:auto; display:flex; align-items:center; gap:10px; padding:11px; border-radius:14px;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  box-shadow:var(--shadow-card);
}
.user-chip .avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(145deg,#dfe7ff,#b9c8ff); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; font-weight:800; }
.user-chip b { display:block; font-size:13px; }
.user-chip small { color:var(--muted); font-size:11px; }

/* ---------- Cards (3D raised) ---------- */
.card {
  background:var(--panel); border-radius:var(--radius); padding:22px;
  border:1px solid #fff; box-shadow:var(--shadow-card); margin-bottom:20px;
}
.card h3 { font-size:16px; margin-bottom:14px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; gap:14px; flex-wrap:wrap; }
.page-head h1 { font-size:26px; font-weight:800; }
.page-head p { color:var(--muted); font-size:13.5px; margin-top:3px; }

/* ---------- Stats ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-bottom:22px; }
.stat {
  background:var(--panel); border-radius:var(--radius); padding:18px 20px; position:relative; overflow:hidden;
  border:1px solid #fff; box-shadow:var(--shadow-card); border-top:3px solid var(--blue);
  transition:transform .18s ease, box-shadow .18s ease;
}
.stat:hover { transform:translateY(-3px); box-shadow:0 1px 0 #fff inset, 0 18px 34px -10px rgba(19,26,46,.2); }
.stat.green { border-top-color:var(--green); }
.stat.orange { border-top-color:var(--orange); }
.stat.purple { border-top-color:#7a5af8; }
.stat-label { font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); font-weight:700; }
.stat-value { font-size:26px; font-weight:800; margin-top:6px; }
.stat small { color:var(--muted); font-size:12px; }

/* ---------- Hero band ---------- */
.hero {
  background:linear-gradient(135deg,#1a3bd8 0%, #10259c 70%, #0b1a70 100%);
  color:#fff; border-radius:20px; padding:26px 30px; margin-bottom:22px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  box-shadow:var(--shadow-deep), 0 2px 0 rgba(255,255,255,.18) inset;
  position:relative; overflow:hidden;
}
.hero:before { content:''; position:absolute; right:-60px; top:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.hero h1 { font-size:23px; }
.hero p { opacity:.85; font-size:13.5px; margin-top:5px; }
.hero .big { font-family:'Sora'; font-size:34px; font-weight:800; }

/* ---------- Buttons (3D extruded) ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:12px;
  font-weight:700; font-size:14px; cursor:pointer; border:none; font-family:'Inter';
  background:linear-gradient(145deg,var(--blue-2),var(--blue-dark)); color:#fff;
  box-shadow: 0 2px 0 rgba(255,255,255,.3) inset, 0 -3px 0 rgba(0,0,0,.28) inset, 0 10px 18px -6px rgba(26,59,216,.45);
  transition:all .14s ease;
}
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 4px 8px -4px rgba(26,59,216,.4); }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 1px 0 #fff inset, 0 6px 14px -6px rgba(19,26,46,.15), 0 -3px 0 rgba(19,26,46,.05) inset; }
.btn.green { background:linear-gradient(145deg,#16c079,#0a9455); box-shadow:0 2px 0 rgba(255,255,255,.3) inset, 0 -3px 0 rgba(0,0,0,.25) inset, 0 10px 18px -6px rgba(18,183,106,.45); }
.btn.red { background:linear-gradient(145deg,#f05a5f,#c2373c); box-shadow:0 2px 0 rgba(255,255,255,.3) inset, 0 -3px 0 rgba(0,0,0,.25) inset, 0 10px 18px -6px rgba(229,72,77,.45); }
.btn.sm { padding:7px 13px; font-size:12.5px; border-radius:10px; }

/* ---------- Forms ---------- */
label.f { display:block; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); font-weight:700; margin:14px 0 6px; }
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea {
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:#f7f9fd; font-family:'Inter'; font-size:14px; color:var(--ink); outline:none;
  box-shadow: 0 2px 4px rgba(19,26,46,.05) inset;
  transition:border .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus { border-color:var(--blue-2); background:#fff; box-shadow:0 0 0 3px rgba(47,91,255,.13); }
small.hint { color:#a0a9bf; font-size:11.5px; display:block; margin-top:4px; }

/* ---------- Tables ---------- */
.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th { text-align:left; font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); }
.tbl td { padding:13px 12px; border-bottom:1px solid #eef1f8; vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:#f8faff; }

/* ---------- Badges ---------- */
.badge { display:inline-block; padding:4px 11px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.4px; }
.badge.sent { background:#e8edff; color:var(--blue-dark); }
.badge.paid, .badge.approved, .badge.completed { background:var(--green-bg); color:#0a7a48; }
.badge.pending { background:var(--orange-bg); color:#b25708; }
.badge.cancelled, .badge.rejected, .badge.blocked { background:var(--red-bg); color:#b2383c; }

/* ---------- Alerts ---------- */
.alert { padding:13px 16px; border-radius:12px; font-size:13.5px; font-weight:600; margin-bottom:16px; border:1px solid; }
.alert.ok { background:var(--green-bg); color:#0a7a48; border-color:#bfeeda; }
.alert.err { background:var(--red-bg); color:#b2383c; border-color:#f6c7c9; }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:20px; }
.login-cube { width:66px; height:66px; border-radius:18px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; font-family:'Sora'; font-weight:800; font-size:22px; color:#fff;
  background:linear-gradient(145deg,var(--blue-2),var(--blue-dark));
  box-shadow: 0 3px 0 rgba(255,255,255,.35) inset, 0 -5px 0 rgba(0,0,0,.22) inset, 0 20px 34px -10px rgba(26,59,216,.55);
  transform:perspective(400px) rotateX(10deg);
}
.login-title { font-family:'Sora'; font-size:24px; font-weight:800; }
.login-title b { color:var(--blue); }
.login-sub { color:var(--muted); font-size:13.5px; margin:6px 0 20px; }
.login-card { width:100%; max-width:420px; background:#fff; border-radius:20px; padding:28px; border:1px solid #fff; box-shadow:var(--shadow-card), 0 30px 60px -20px rgba(19,26,46,.25); }
.login-foot { margin-top:22px; color:#a7b0c5; font-size:12px; }

/* ---------- Stepper ---------- */
.stepper { display:flex; align-items:center; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.step { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#a7b0c5; }
.step .dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#e7ebf6; color:#8b95ad; font-weight:800; box-shadow:0 2px 4px rgba(19,26,46,.08) inset; }
.step.done .dot { background:linear-gradient(145deg,#16c079,#0a9455); color:#fff; box-shadow:0 2px 0 rgba(255,255,255,.3) inset, 0 -2px 0 rgba(0,0,0,.2) inset; }
.step.now .dot { background:linear-gradient(145deg,var(--blue-2),var(--blue-dark)); color:#fff; box-shadow:0 2px 0 rgba(255,255,255,.3) inset, 0 -2px 0 rgba(0,0,0,.2) inset, 0 8px 14px -5px rgba(26,59,216,.5); }
.step.now { color:var(--blue-dark); }
.step-line { flex:1; height:2px; min-width:24px; background:#dde3f0; border-radius:2px; }
.step-line.done { background:var(--green); }

/* ---------- Tier cards ---------- */
.tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:15px; }
.tier {
  border:2px solid var(--line); border-radius:16px; padding:20px 14px; text-align:center; cursor:pointer;
  background:#fff; transition:all .16s ease; box-shadow:0 6px 14px -8px rgba(19,26,46,.12);
}
.tier:hover { transform:translateY(-3px); }
.tier.sel { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(47,91,255,.14), 0 14px 24px -10px rgba(26,59,216,.35); transform:translateY(-3px); }
.tier .crown { font-size:24px; }
.tier b { display:block; font-family:'Sora'; font-size:16px; margin:7px 0 3px; }
.tier small { color:var(--muted); font-size:12px; }
.tier .acct { display:inline-block; margin-top:9px; font-size:10px; font-weight:700; letter-spacing:.6px; background:#eef2fe; color:var(--blue-dark); padding:3px 9px; border-radius:99px; }

/* ---------- Misc ---------- */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.right { text-align:right; }
.pos { color:var(--green); font-weight:800; }
.neg { color:var(--red); font-weight:800; }
.mut { color:var(--muted); }
.mono { font-family:ui-monospace,monospace; font-size:12px; background:#f2f4fb; padding:3px 8px; border-radius:7px; }
.pill-tabs { display:inline-flex; background:#e9edf7; border-radius:12px; padding:4px; gap:3px; box-shadow:0 2px 5px rgba(19,26,46,.07) inset; }
.pill-tabs a { padding:7px 15px; border-radius:9px; font-size:12.5px; font-weight:700; color:#5a6480; }
.pill-tabs a.on { background:#fff; color:var(--ink); box-shadow:0 3px 8px -3px rgba(19,26,46,.2); }
.dirball { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.dirball.in { background:var(--green-bg); color:var(--green); }
.dirball.out { background:var(--red-bg); color:var(--red); }
.datechip { width:44px; text-align:center; border:1px solid var(--line); border-radius:11px; padding:5px 0; box-shadow:0 3px 6px -3px rgba(19,26,46,.12); background:#fff; }
.datechip small { display:block; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-weight:700; }
.datechip b { font-family:'Sora'; font-size:16px; }
.empty { text-align:center; color:var(--muted); padding:40px 10px; font-size:14px; }

@media (max-width: 860px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:relative; flex-direction:column; }
  .menu { flex-direction:row; flex-wrap:wrap; }
  .content { padding:18px; }
  .grid2,.grid3 { grid-template-columns:1fr; }
}