/* ================================================================
   STAFF PORTAL DASHBOARD: the Claude Design's structure and board tiles
   ----------------------------------------------------------------
   Source: "DTTASA Staff Portal.dc.html" in the design project, read 2026-07-28.

   WHAT THIS DESIGN PAGE COVERS. Five element ids and no more: #dash-tiles with
   #dash-tile-structure and #dash-tile-opportunities, and #mh-applications-card
   with #mh-documents-card on My Hub. So it is not a redesign of the dashboard. It
   adds two rich tiles to it, and two cards to My Hub. Everything else on either
   page is outside this design and untouched.

   WHY THE TILES MATTER. The portal already linked to both pages, as a nav item
   and a one word chip. The design's version carries a 40px icon disc, a Cinzel
   title, a live meta line and a one line summary, so the tile tells the reader
   something BEFORE they click it: which version of the structure is in force, and
   how many posts are open to them right now. That is the whole difference between
   navigation and a dashboard.

   ── THE SECOND TOKEN SYSTEM ─────────────────────────────────────────
   This design does NOT use the wrapper convention the other eleven pages use. It
   declares custom properties on an .app wrapper and ships a light theme:

       --bg:#070a08   --panel:rgba(18,26,20,.72)   --text:#e9ede9
       --dim:#93a099  --gold:#f0c832               --border:rgba(240,200,50,.14)
       .app[data-theme="light"]{ --bg:#edf1ea; --text:#132018; --gold:#a67c0a; }

   Different ground from #0c1109 and different ink from #f2f7ee. css/dc-base.css
   cannot serve both without flattening a light mode the design intends, so this
   file does NOT import it. It states the design's own values, and it takes them
   from the tokens css/index.css already defines where those agree, so the tiles
   sit correctly whichever theme the dashboard is in.
   ================================================================ */

/* ── The two tiles, side by side ─────────────────────────────────────── */
.dtiles {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin:0 0 16px;
}
/* A grid item defaults to min-width:auto, so a long summary line would inflate
   the track and push the dashboard sideways. */
.dtiles > * { min-width:0; }

.dtiles > a {
  display:block;
  border-radius:14px;
  padding:18px 20px;
  border:1px solid var(--border, rgba(240,200,50,.14));
  background:var(--panel, rgba(18,26,20,.72));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--text, #e9ede9);
  text-decoration:none;
}
/* The design's own lift, which is a shorter travel and a softer shadow than the
   .lift used on the other pages. Copied as it is rather than harmonised: this
   page has its own material and its own motion. */
.dlift { transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .2s ease, box-shadow .2s ease; }
.dlift:hover {
  transform:translateY(-2px);
  border-color:var(--border2, rgba(240,200,50,.34));
  box-shadow:0 16px 40px -14px rgba(0,0,0,.5);
}

.dtile-head { display:flex; align-items:center; gap:11px; }
.dtile-head > div { min-width:0; }
.dtile-ic {
  width:40px; height:40px; flex:0 0 auto; border-radius:11px;
  border:1px solid var(--border2, rgba(240,200,50,.34));
  background:rgba(212,175,55,.12);
  display:flex; align-items:center; justify-content:center;
}
.dtile-ic > i { font-size:14px; color:var(--gold, #f0c832); }
.dtile-t { font-family:'Cinzel', serif; font-size:16px; font-weight:600; line-height:1.25; }
.dtile-meta {
  margin-top:3px; font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--dim, #93a099);
  overflow-wrap:anywhere;
}
.dtile-b {
  margin-top:13px; font-size:13.5px; line-height:1.55;
  color:var(--dim, #93a099);
  overflow-wrap:anywhere;
}
.dtile-cta {
  display:flex; align-items:center; gap:8px; margin-top:13px; padding-top:13px;
  border-top:1px solid var(--border, rgba(240,200,50,.14));
}
.dtile-cta > span { font-size:9.5px; letter-spacing:1.4px; color:var(--gold, #f0c832); }
.dtile-cta > i { font-size:10px; color:var(--gold, #f0c832); }

/* ── Responsive: the design's single breakpoint ──────────────────────
   "DTTASA Staff Portal.dc.html" collapses both .dtiles and .dcols at 900px and
   has no other breakpoint for them. */
@media (max-width:900px) {
  .dtiles { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   THE TWO CARDS BENEATH THE TILES  (added 2026-07-29)
   ────────────────────────────────────────────────────────────────────
   "DTTASA Staff Portal.dc.html" covers five ids. Three of them, #dash-tiles and
   its two tiles, shipped on 2026-07-28. These are the other two.

   They belong to the design's dashboard() surface, NOT to My Hub, despite the
   `mh-` prefix on their ids: the applications card is built from sgWaiting(),
   which is the Secretary General's own queue. The ids are kept as the design
   writes them because they are new elements with no existing readers.
   ════════════════════════════════════════════════════════════════════ */
.dcols { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; align-items:start; margin:0 0 16px; }
/* A grid item defaults to min-width:auto, so a long post title in the left card
   would inflate the track and push the dashboard sideways. */
.dcols > * { min-width:0; }
@media (max-width:900px) {
  .dcols { grid-template-columns:1fr; }
}

.dcard {
  border-radius:14px; overflow:hidden; min-width:0;
  border:1px solid var(--border, rgba(240,200,50,.14));
  background:var(--panel, rgba(18,26,20,.72));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--text, #e9ede9);
}
.dcard-hd {
  display:flex; align-items:center; gap:9px; padding:13px 18px;
  border-bottom:1px solid var(--border, rgba(240,200,50,.14));
  background:rgba(4,80,30,.14);
}
.dcard-hd > i { font-size:13px; color:var(--gold, #f0c832); }
.dcard-hd-t { font-family:'Cinzel', serif; font-size:14px; font-weight:600; }
.dcard-hd-n {
  margin-left:auto; font-size:9px; letter-spacing:1.4px;
  color:var(--dim, #93a099);
  border:1px solid var(--border, rgba(240,200,50,.14)); border-radius:5px; padding:3px 8px;
  white-space:nowrap;
}
.dcard-row {
  display:flex; align-items:center; gap:13px; padding:13px 18px;
  border-bottom:1px solid var(--border, rgba(240,200,50,.14));
}
.dcard-row:last-child { border-bottom:0; }
.dcard-av {
  width:36px; height:36px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0a6b2a,#04501e);
  border:1.5px solid var(--gold, #f0c832);
  font-size:11.5px; font-weight:600; color:#fff;
}
.dcard-main { flex:1 1 auto; min-width:0; }
.dcard-t { font-size:13.5px; font-weight:600; line-height:1.3; word-break:break-word; }
.dcard-m { margin-top:4px; font-size:10px; letter-spacing:1.2px; color:var(--dim, #93a099); overflow-wrap:anywhere; }
.dcard-chip {
  flex:0 0 auto; padding:4px 9px; border-radius:999px;
  font-size:9px; letter-spacing:1.3px; white-space:nowrap;
  border:1px solid var(--border2, rgba(240,200,50,.34));
  background:rgba(240,200,50,.14); color:var(--gold, #f0c832);
}
/* The design's second tone, for a stage that is waiting on somebody else's
   signature rather than on a decision. */
.dcard-chip.is-ok {
  border-color:var(--ok, #3fae63); background:rgba(63,174,99,.14); color:var(--ok, #3fae63);
}
.dcard-empty {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:34px 20px; text-align:center;
}
.dcard-empty > i { font-size:20px; color:var(--ok, #3fae63); }
.dcard-empty-t { font-size:13.5px; color:var(--dim, #93a099); max-width:40ch; }
.dcard-foot {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px; font-size:13px; font-weight:600;
  color:var(--gold, #f0c832); text-decoration:none;
  border-top:1px solid var(--border, rgba(240,200,50,.14));
}
.dcard-note {
  padding:13px 18px; font-size:12px; line-height:1.55;
  color:var(--dim, #93a099);
}

/* ── The source chip ─────────────────────────────────────────────────
   The whole reason the documents card exists, in the design's own words:
   "Documents carry where they came from, so an internal appointment is never
   mistaken for an external one." Internal is the one that gets the gold. */
.doc-source-chip {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:9px; padding:4px 9px; border-radius:999px;
  font-size:9px; letter-spacing:1.3px;
  border:1px solid var(--border, rgba(240,200,50,.14));
  background:var(--input, rgba(255,255,255,.045));
  color:var(--dim, #93a099);
}
.doc-source-chip > i { font-size:8.5px; }
.doc-source-chip[data-source="internal-recruitment"] {
  border-color:var(--border2, rgba(240,200,50,.34));
  background:rgba(240,200,50,.14);
  color:var(--gold, #f0c832);
}