/* pages.css — shared design-system components for the redesigned inner pages
   (scholarships, scholarship detail, applications, tracker, documents,
   academics, profile, verification). Builds on the tokens defined in
   dashboard.css and reuses the db-* sidebar/topbar shell. All component
   classes are prefixed dk- to mirror the design source. */

/* extra tokens used by these pages (dashboard.css defines the rest) */
.db-content { --teal:#1f7a72; --teal-soft:#e6f4f2; }

/* ---- page header ---- */
.dk-phead { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.dk-phead h1 { font-size:22px; font-weight:800; letter-spacing:-.6px; }
.dk-phead .sub { font-size:14px; color:var(--ink2); font-weight:500; margin-top:4px; }
.dk-phead-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ---- card ---- */
.dk-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.dk-card-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px 9px; }
.dk-card-h h2 { font-size:16px; font-weight:700; letter-spacing:-.3px; display:flex; align-items:center; gap:9px; }
.dk-card-h h2 .badge { font-size:11px; font-weight:700; background:var(--amber-soft); color:var(--amber); border-radius:99px; padding:3px 9px; }
.dk-card-h .link { font-size:13px; font-weight:700; color:var(--primary); display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.dk-card-b { padding:4px 16px 13px; }

/* ---- grid helper ---- */
.dk-grid { display:grid; gap:14px; align-items:start; }

/* ---- buttons ---- */
.dk-btn {
  border:none; border-radius:11px; font-family:inherit; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; white-space:nowrap; height:42px; padding:0 18px; font-size:14px;
  background:var(--primary); color:#fff; text-decoration:none; letter-spacing:-.1px;
  box-shadow:0 1px 2px rgba(20,30,45,.06), 0 2px 8px rgba(47,95,192,.18);
  transition:background .15s, box-shadow .15s, transform .08s;
}
.dk-btn:hover { background:var(--primary-700); box-shadow:0 2px 4px rgba(20,30,45,.08), 0 4px 14px rgba(47,95,192,.26); }
.dk-btn:active { transform:translateY(1px); box-shadow:0 1px 2px rgba(20,30,45,.06); }
.dk-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.dk-btn .bi { font-size:15px; }
.dk-btn-sm { height:36px; padding:0 14px; font-size:13px; border-radius:10px; }
.dk-btn-soft { background:var(--primary-soft); color:var(--primary); box-shadow:none; }
.dk-btn-soft:hover { background:#dfeafa; box-shadow:none; }
.dk-btn-out { background:var(--card); color:var(--ink); border:1px solid var(--line2); box-shadow:0 1px 2px rgba(20,30,45,.04); }
.dk-btn-out:hover { background:#f7f9fb; border-color:#d4ddec; box-shadow:0 2px 6px rgba(20,30,45,.06); }
.dk-btn-ghost { background:transparent; color:var(--ink2); box-shadow:none; }
.dk-btn-ghost:hover { background:#f0f2f5; color:var(--ink); box-shadow:none; }

/* ---- mono logo badge ---- */
.dk-mono { border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:-.4px; }

/* ---- scholarship thumbnail (image with initials fallback) ---- */
.sch-thumb-wrap {
  width:58px; height:58px; flex:0 0 auto; border-radius:13px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center;
}
.sch-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.sch-thumb-wrap .dk-mono { border-radius:0; }

/* ---- chips & status ---- */
.dk-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.dk-st { font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:99px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.dk-st .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-draft { background:#eef0f3; color:var(--ink2); }
.st-award { background:var(--green-soft); color:var(--green); }
.st-interview { background:var(--primary-soft); color:var(--primary); }
.st-review { background:var(--violet-soft); color:var(--violet); }
.st-submitted { background:var(--primary-soft); color:var(--primary); }
.st-closed { background:var(--red-soft); color:var(--red); }
.st-verified { background:var(--green-soft); color:var(--green); }
.st-pending { background:var(--amber-soft); color:var(--amber); }

/* ---- filter rail ---- */
.dk-fgroup { padding:10px 4px; border-bottom:1px solid var(--line); }
.dk-fgroup:last-child { border-bottom:none; }
.dk-fgroup .ft { font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--ink3); margin-bottom:7px; }
.dk-fopt { display:flex; align-items:center; gap:10px; padding:5px 4px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.dk-fbox { width:18px; height:18px; border-radius:6px; border:2px solid var(--line2); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; }
.dk-fopt.on .dk-fbox { background:var(--primary); border-color:var(--primary); }
.dk-fopt .cnt { margin-left:auto; font-size:12px; color:var(--ink3); font-weight:600; }
.dk-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--line2); flex:0 0 auto; position:relative; }
.dk-fopt.on .dk-radio { border-color:var(--primary); }
.dk-fopt.on .dk-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--primary); }

/* ---- search field in topbar / page ---- */
.dk-search { display:flex; align-items:center; gap:9px; height:42px; padding:0 14px; border-radius:11px; border:1px solid var(--line2); background:var(--card); color:var(--ink); font-size:13.5px; font-weight:500; }
.dk-search input { border:none; outline:none; background:transparent; font-family:inherit; font-size:13.5px; font-weight:500; color:var(--ink); flex:1 1 auto; min-width:0; }
.dk-search .bi { color:var(--ink3); }

/* ---- segmented tabs ---- */
.dk-seg { display:inline-flex; background:#eef1f4; border-radius:12px; padding:4px; gap:2px; }
.dk-seg button { border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:700; color:var(--ink2); padding:8px 16px; border-radius:9px; cursor:pointer; }
.dk-seg button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(20,30,45,.1); }

/* ---- progress bar ---- */
.dk-bar { height:8px; border-radius:99px; background:#eaedf2; overflow:hidden; }
.dk-bar > i { display:block; height:100%; border-radius:99px; background:var(--primary); }

/* ---- form fields ---- */
.dk-field { display:flex; flex-direction:column; gap:7px; }
.dk-field label { font-size:12.5px; font-weight:700; color:var(--ink2); }
.dk-input { min-height:44px; border-radius:11px; border:1px solid var(--line2); background:var(--card); padding:10px 14px; font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px; }
.dk-input .ph { color:var(--ink3); font-weight:500; }
.dk-input .bi { color:var(--ink3); font-size:15px; }
.dk-input .chev { margin-left:auto; color:var(--ink3); }
.dk-formgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }

/* ---- doc tiles ---- */
.dk-doc { border:1px solid var(--line); border-radius:13px; padding:12px; display:flex; align-items:center; gap:14px; transition:border-color .14s, box-shadow .14s, transform .12s; }
.dk-doc:hover { border-color:#d4ddec; box-shadow:var(--shadow); transform:translateY(-1px); }
.dk-doc .ic { width:46px; height:46px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:21px; }
.dk-doc .nm { font-size:14px; font-weight:700; letter-spacing:-.2px; }
.dk-doc .mt { font-size:12px; color:var(--ink2); font-weight:500; margin-top:2px; }

/* ---- upload dropzone ---- */
.dk-drop { border:1.6px dashed var(--line2); border-radius:13px; padding:18px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; background:#fafbfc; }
.dk-drop .ic { width:48px; height:48px; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:22px; }

/* ---- timeline ---- */
.dk-tl { display:flex; flex-direction:column; }
.dk-tlrow { display:flex; gap:16px; }
.dk-tlrail { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
.dk-tlnode { width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; z-index:1; }
.dk-tlline { width:2px; flex:1 1 auto; min-height:26px; background:var(--line2); }
.dk-tlbody { flex:1 1 auto; padding-bottom:22px; }
.dk-tlrow:last-child .dk-tlbody { padding-bottom:0; }
.dk-tlbody .nm { font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.dk-tlbody .mt { font-size:12.5px; color:var(--ink2); font-weight:500; margin-top:3px; line-height:1.45; }

/* ---- key-value list ---- */
.dk-kv { display:flex; flex-direction:column; }
.dk-kvrow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.dk-kvrow:last-child { border-bottom:none; }
.dk-kvrow .k { font-size:13px; color:var(--ink2); font-weight:600; }
.dk-kvrow .v { font-size:13.5px; color:var(--ink); font-weight:700; text-align:right; }

/* ---- stat band ---- */
/* stat band — matches the dashboard KPI cards: count on the left, icon on
   the right, same row; label below */
.dk-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.dk-stat { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
.dk-stat .stat-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dk-stat .ic { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; flex:0 0 auto; }
.dk-stat .num { font-size:26px; font-weight:800; letter-spacing:-1px; line-height:1; }
.dk-stat .lab { font-size:13px; color:var(--ink2); font-weight:600; }
.dk-stat .lab b { color:var(--ink); }

/* ---- skeleton loader (reuses db-skel from dashboard.css) ---- */

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .dk-grid.cols-2 { grid-template-columns:1fr !important; }
  .dk-grid.has-rail { grid-template-columns:1fr !important; }
  .dk-rail { order:-1; }
}
@media (max-width: 760px) {
  .dk-phead h1 { font-size:22px; }
  .dk-formgrid { grid-template-columns:1fr; }
  .dk-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px) {
  .dk-stats { grid-template-columns:1fr 1fr; gap:11px; }
}