/* =========================================================
   NoLife Group – Apply Page Styles (matcher Profile-stilen)
   Fil: app-apply.css
   ========================================================= */

:root{
  /* Farver */
  --bg: #0b1020;
  --text: #e9ecf5;
  --text-muted: #e9ecf5;
  --border: #0f1530;
  --shadow: 0 8px 24px rgba(20, 30, 50, 0.08);

  --brand-1: #a855f7;
  --brand-2: #ef4444;
  --brand-3: #f59e0b;

  --sidebar-bg: #0b1229;
  --sidebar-link: #cbd5e1;
  --sidebar-hover: #374151;

  --btn: #3b82f6;
  --btn-hover: #2563eb;

  --ok-bg:#f7e7e7;   --ok-bd:#b6e7c5;   --ok-tx:#166534;
  --wr-bg:#fff3e6;   --wr-bd:#ffd9b3;   --wr-tx:#9a3412;
  --bad-bg:#fdeaea;  --bad-bd:#f5c2c2;  --bad-tx:#991b1b;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====== Layout ====== */
.app-layout{display:flex; min-height:100vh}

/* Sidebar */
.sidebar{
  width:260px; background:var(--sidebar-bg); color:#fff;
  display:flex; flex-direction:column; padding:20px 12px;
}
.sidebar-header{ text-align:center; margin-bottom:18px; }
.sidebar-logo{ width:80px; height:80px; border-radius:16px; object-fit:cover }

.sidebar-nav ul{ list-style:none; margin:0; padding:0; }
.sidebar-nav li{ margin:10px 0; }
.sidebar-nav a{
  color:var(--sidebar-link); text-decoration:none; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; transition:background .2s,color .2s;
}
.sidebar-nav a:hover{ background:var(--sidebar-hover); color:#fff; }
.sidebar-nav .icon{ width:1.25rem; display:inline-grid; place-items:center }

/* Content area */
.content{ flex:1; display:flex; flex-direction:column }

/* Topbar */
.topbar{
  background:#0b1229; border-bottom:1px solid var(--border);
  height:56px; display:flex; align-items:center; justify-content:flex-end; padding:0 18px;
}
.topbar .profile-link{ color:inherit; text-decoration:none; display:flex; align-items:center; gap:8px; }
.topbar .profile-link img{ width:30px; height:30px; border-radius:50%; object-fit:cover }

/* ====== Page structure (hero + card) ====== */
.page{
  position:relative; padding:0 30px 30px;
}
.page::before{
  content:""; display:block; height:100px; margin:0 -30px; border-radius:14px;
}

/* Overlappende hovedkort */
.card{
  margin-top:-48px; background:#0f1530; border:1px solid var(--border); border-radius:14px;
  padding:24px; box-shadow: var(--shadow);
}

/* Typografi */
h1{ margin:6px 0 12px; font-size:28px; line-height:1.2; letter-spacing:-.2px; }
h2{ margin:22px 0 10px; font-size:18px; position:relative; }
h2::after{ content:""; display:block; height:1px; background:#eef0f3; margin-top:8px; }
p{ margin:8px 0 12px; color:#e9ecf5; line-height:1.65 }

/* Lister */
ul{ list-style:none; padding:0; margin:8px 0 12px; }
ul li{
  display:flex; gap:10px; align-items:flex-start; padding:8px 0; color:#e9ecf5;
  border-bottom:1px dashed var(--border);
}
ul li:last-child{ border-bottom:0 }
ul li::before{ content:"•"; font-weight:900; line-height:1; margin-top:2px; color:#5964f2 }

/* Links */
a{ color:#3b82f6; text-decoration:none }
a:hover{ text-decoration:underline }

/* Knapper */
.btn, .btn-discord{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--btn); color:#fff; border:none; border-radius:10px;
  padding:10px 14px; font-weight:700; cursor:pointer; text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.btn:hover, .btn-discord:hover{ background:var(--btn-hover) }

/* Badges (kan bruges i teksten hvis du vil) */
.badge{
  display:inline-block; padding:6px 12px; border-radius:999px; font-weight:700; font-size:12px;
  border:1px solid transparent; line-height:1; white-space:nowrap; vertical-align:middle;
}
.badge-ok{   background:var(--ok-bg);  color:var(--ok-tx);  border-color:var(--ok-bd); }
.badge-warn{ background:var(--wr-bg);  color:var(--wr-tx);  border-color:var(--wr-bd); }
.badge-bad{  background:var(--bad-bg); color:var(--bad-tx); border-color:var(--bad-bd); }

/* “Info-kort” / sektioner hvis du vil lave flere kort på siden */
.section-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:18px }
.section-card{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px;
  box-shadow:0 2px 5px rgba(0,0,0,.06);
}

/* Tabel-støtte (hvis du får behov) */
.table{
  width:100%; border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:#fff; border-collapse:collapse;
}
.table th, .table td{ padding:12px 14px; border-bottom:1px solid #eef0f3; text-align:left }
.table th{ background:#f8fafc; color:#374151; font-weight:700 }
.table tr:last-child td{ border-bottom:0 }

/* Små hjælpere */
.muted{ color: var(--text-muted) }

/* ====== Responsive ====== */
@media (max-width: 980px){
  .app-layout{ flex-direction:column }
  .sidebar{ width:100%; flex-direction:row; overflow-x:auto }
  .sidebar-nav ul{ display:flex; gap:12px }
  .page{ padding:0 16px 20px }
  .page::before{ margin:0 -16px; border-radius:10px; }
  .card{ margin-top:-36px; padding:18px }
  .section-grid{ grid-template-columns:1fr }
}

/* Form styling */
.card h1 {
  margin-bottom: 20px;
  font-size: 28px;
  color: #fff;
}

.card form label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
  color: #fff;
}

.card form input[type="text"],
.card form input[type="number"],
.card form textarea {
  width: 100%;
  padding: 10px 12px;
  margin-top: 5px;
  border: 1px solid #1c233a;
  border-radius: 8px;
  background-color: #0b1020;
  font-size: 14px;
  transition: border 0.2s, box-shadow 0.2s;
}

.card form input:focus,
.card form textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  outline: none;
}

.card form textarea {
  resize: vertical;
  min-height: 80px;
}

/* Checkboxes */
.card .checkboxes {
  margin-top: 15px;
}

.card .checkboxes label {
  display: block;
  font-weight: normal;
  color: #fff;
  margin-bottom: 5px;
}

.card .checkboxes input[type="checkbox"] {
  margin-right: 8px;
}

/* Submit button */
.card button {
  margin-top: 20px;
  background-color: #3b82f6;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.card button:hover {
  background-color: #2563eb;
}