/* assets/style.css - Mentor-Link fancy UI (shared) */

/* -- Reset & base -- */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg1:#08121a; --bg2:#0b2540;
  --accent1:#00bfa6; --accent2:#2f6fff; --accent3:#ff4f6d;
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.04);
  --card-radius:16px;
  --max-width:1100px;
  --muted: #b7c1cd;
  --surface:#0f1720;
}

/* Page background gradient */
body{
  min-height:100vh;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(130deg, var(--bg1) 0%, #072033 30%, var(--bg2) 100%);
  color: #e6eef8;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;padding:36px;
}

/* container */
.container{
  width:100%;
  max-width:var(--max-width);
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:28px;
  align-items:start;
}

/* Layout fallback for small screens */
@media (max-width:980px){
  .container{grid-template-columns:1fr; padding:12px}
}

/* glass card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border-radius:var(--card-radius);
  padding:22px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
}

/* brand header (left column top) */
.brand {
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
}
.brand .logo{
  width:56px;height:56px;border-radius:12px;
  background: linear-gradient(135deg,var(--accent1),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-weight:700;color:white;
  box-shadow: 0 8px 18px rgba(47,111,255,0.18);
}
.brand h1{font-size:20px;color:#fff;letter-spacing:0.2px}
.brand p{color:var(--muted);font-size:13px;margin-top:4px}

/* form styles */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}

.field{
  display:flex;flex-direction:column;margin-bottom:12px;
}
.field label{
  font-size:13px;color:var(--muted);margin-bottom:6px;
}
.input, textarea, select{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  padding:10px 12px;border-radius:10px;color:#eaf6ff;
  outline:none;font-size:14px;
  transition:all .18s ease;
}
.input::placeholder, textarea::placeholder{ color: rgba(230,238,248,0.35); }
.input:focus, textarea:focus, select:focus{ box-shadow: 0 6px 20px rgba(47,111,255,0.06); border-color: rgba(47,111,255,0.6);}

textarea{min-height:110px;resize:vertical;padding-top:10px}

/* file input wrapper */
.file-wrap{
  display:flex;align-items:center;gap:10px;
}
.file-badge{
  padding:6px 10px;border-radius:8px;background:linear-gradient(90deg,var(--accent2),var(--accent3));font-weight:600;font-size:13px;
  color:white;
}

/* support & small text */
.small{font-size:13px;color:var(--muted);margin-top:8px}

/* primary CTA */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color:white;border:none;padding:12px 16px;border-radius:12px;font-weight:700;
  cursor:pointer;margin-top:10px;box-shadow:0 10px 30px rgba(0,123,255,0.12);
}
.btn.secondary{
  background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);font-weight:600;
}

/* right column summary card */
.summary{
  display:flex;flex-direction:column;gap:12px;
}
.summary .meta{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px;border-radius:12px;background:var(--glass-2);border:1px solid rgba(255,255,255,0.02)
}
.meta h3{font-size:14px}
.meta p{font-size:13px;color:var(--muted)}

/* tracking badge */
.badge{
  display:inline-block;padding:8px 12px;border-radius:10px;background:rgba(0,0,0,0.18);font-weight:700;color:#fff;
}

/* order list table (admin) */
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th, .table td{
  padding:10px 12px;font-size:14px;border-bottom:1px solid rgba(255,255,255,0.03);
  text-align:left;color:#e8f3ff;
}
.table th{font-size:13px;color:var(--muted);font-weight:600}
.row-actions a{ margin-right:8px;color:var(--accent2);font-weight:600;text-decoration:none}

/* admin header */
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.admin-quick{display:flex;gap:10px;align-items:center}

/* status pills */
.pill{padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px}
.pending{background:rgba(255,165,0,0.14);color:#ffd38a}
.in-transit{background:rgba(47,111,255,0.12);color:#9ec1ff}
.delivered{background:rgba(0,200,120,0.12);color:#b9ffd6}
.cancelled{background:rgba(255,80,100,0.08);color:#ffb3b3}

/* small helpers */
.center { display:flex; justify-content:center; align-items:center; }
.right { text-align:right; }

/* tiny responsive tweaks */
@media (max-width:600px){
  .brand h1{font-size:18px}
  .btn{width:100%}
  .table th, .table td{font-size:13px}
}