/* Codebasics Job Review - colours taken from codebasics.io */
:root{
  --navy:#181830; --blue:#2767b1; --line:#e4e8eb; --grey:#54585b;
  --bg:#f7f8fa; --card:#fff; --ink:#181830;
  --pending:#b8860b; --pending-bg:#fff8e1; --pending-line:#f0d48a;
  --approved:#1b7f4b; --approved-bg:#e7f6ec; --approved-line:#bce3c6;
  --posted:#2767b1;  --posted-bg:#e8f1fb;  --posted-line:#bcd6f2;
  --error:#c0392b;   --error-bg:#fdecec;   --error-line:#f3c6c6;
  --off:#6b7280;     --off-bg:#f1f2f4;     --off-line:#dfe2e7;
  --radius:10px;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:var(--navy);color:#fff}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:600}
.brand img{height:34px;width:auto;display:block}
.brand span{font-size:15px;opacity:.92;padding-left:12px;border-left:1px solid rgba(255,255,255,.22)}
.who{display:flex;align-items:center;gap:14px;font-size:13.5px;opacity:.9}
.out{color:#fff;opacity:.75;text-decoration:underline}
.out:hover{opacity:1}

/* tabs */
.tabs{display:flex;gap:2px;padding:0 28px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12)}
.tab{padding:10px 20px;color:rgba(255,255,255,.72);text-decoration:none;font-weight:600;font-size:14px;border-radius:8px 8px 0 0}
.tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.tab.on{color:var(--navy);background:var(--bg)}
.tabgap{flex:1}
.tab.side{font-weight:500}

main{max-width:1120px;margin:0 auto;padding:24px 28px 72px}

/* summary + calendar */
.bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.bar h1{margin:0;font-size:24px;letter-spacing:-.01em}
.sub{margin:4px 0 0;color:var(--grey);font-size:14px}
.cal{display:flex;flex-direction:column;gap:6px}
.cal label{font-size:12.5px;color:var(--grey);font-weight:600}
.cal input[type=date]{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.quick{display:flex;gap:14px}
.lnk{background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--blue);cursor:pointer;text-decoration:underline}

/* rows */
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--off-line);border-radius:var(--radius);padding:15px 18px}
.row.s-pending{border-left-color:var(--pending-line)}
.row.s-approved{border-left-color:var(--approved-line)}
.row.s-posted{border-left-color:var(--posted-line)}
.row.s-error{border-left-color:var(--error-line)}
.row .title{font-weight:600;font-size:15.5px;margin:0 0 3px}
.row .meta{color:var(--grey);font-size:13.5px}
.row .meta b{color:var(--ink);font-weight:600}
.dot{color:var(--line);margin:0 7px}

/* status pill */
.pill{display:inline-block;padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid;white-space:nowrap}
.p-pending{color:var(--pending);background:var(--pending-bg);border-color:var(--pending-line)}
.p-approved{color:var(--approved);background:var(--approved-bg);border-color:var(--approved-line)}
.p-posted{color:var(--posted);background:var(--posted-bg);border-color:var(--posted-line)}
.p-error{color:var(--error);background:var(--error-bg);border-color:var(--error-line)}
.p-dropped,.p-skipped{color:var(--off);background:var(--off-bg);border-color:var(--off-line)}

/* buttons */
.acts{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{border-color:#c6ccd4}
.btn.solid{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.solid:hover{background:#1f5697}
.btn.go{background:var(--approved);border-color:var(--approved);color:#fff}
.btn.go:hover{background:#166b3f}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ms{width:100%;justify-content:center;padding:11px 16px}
.locked{font-size:12.5px;color:var(--off);font-style:italic;white-space:nowrap}

.empty{text-align:center;padding:56px 20px;color:var(--grey);background:var(--card);border:1px dashed var(--line);border-radius:var(--radius)}

/* modal */
/* A class rule beats the browser's built-in handling of the hidden attribute,
   so display:flex below would keep the popup on screen forever without this. */
[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;background:rgba(24,24,48,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet{position:relative;width:100%;max-width:760px;background:#fff;border-radius:14px;padding:30px 34px 34px;box-shadow:0 24px 60px -20px rgba(24,24,48,.5)}
.x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:28px;line-height:1;color:var(--grey);cursor:pointer}
.x:hover{color:var(--ink)}
.sheet h2{margin:0 0 4px;font-size:21px;letter-spacing:-.01em;padding-right:34px}
.sheet .co{color:var(--grey);font-size:15px;margin:0 0 18px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0;padding:16px;background:var(--bg);border-radius:9px}
.fact .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);font-weight:700}
.fact .v{font-size:15px;font-weight:600;margin-top:2px}
.sec{margin-top:20px}
.sec h3{margin:0 0 7px;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}
.sec p{margin:0;white-space:pre-wrap}
.why{padding:14px 16px;border-radius:9px;border:1px solid}
.why.ok{background:var(--approved-bg);border-color:var(--approved-line)}
.why.no{background:var(--off-bg);border-color:var(--off-line)}
.why.bad{background:var(--error-bg);border-color:var(--error-line)}
.kw{display:flex;flex-wrap:wrap;gap:7px}
.kw span{background:var(--posted-bg);color:var(--posted);border:1px solid var(--posted-line);padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:600}
.sheetacts{display:flex;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}

/* ---------- projects ---------- */

/* course picker: three plain buttons, no dropdown to open and read */
.courses{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--grey);cursor:pointer}
.chip:hover{border-color:#c6ccd4;color:var(--ink)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--off-bg);color:var(--grey);font-size:12px;font-weight:700}
.chip.on .n{background:rgba(255,255,255,.2);color:#fff}

.prow{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.prow.off{background:var(--off-bg);opacity:.72}
.pnum{font-size:13px;font-weight:700;color:var(--grey);padding-top:2px;min-width:30px}
.pmain .title{font-weight:600;font-size:15.5px;margin:0 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pmain .kw{margin-bottom:8px}
.notools{font-size:12.5px;color:var(--off);font-style:italic}

/* Two lines is enough to recognise a project. The rest is in Edit, which is
   what keeps a page of 18 projects readable instead of a wall of text. */
.ptext{margin:0;color:var(--grey);font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.prow .acts{align-items:flex-start}
.btn.danger{color:var(--error);border-color:var(--error-line)}
.btn.danger:hover{background:var(--error-bg);border-color:var(--error)}
.grow{flex:1}

/* the add / edit form */
.pform{display:flex;flex-direction:column;margin-top:22px}
.pform label{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);font-weight:700;margin-bottom:6px}
.pform input[type=text],.pform select,.pform textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);margin-bottom:4px}
.pform textarea{resize:vertical;min-height:130px;line-height:1.55}
.pform select:disabled{background:var(--off-bg);color:var(--grey);cursor:not-allowed}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(39,103,177,.14)}
.help{margin:0 0 18px;font-size:12.5px;color:var(--grey)}
.perr{background:var(--error-bg);border:1px solid var(--error-line);color:var(--error);padding:10px 14px;border-radius:8px;font-size:14px;margin-bottom:6px}

/* login */
.login{max-width:400px;margin:64px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:38px 34px;text-align:center}
.loginlogo{height:52px;width:auto;margin-bottom:18px}
.login h1{margin:0 0 6px;font-size:22px}
.login .sub{margin-bottom:22px}
.pwform{display:flex;flex-direction:column;gap:8px;text-align:left;margin-top:14px}
.pwform label{font-size:12.5px;font-weight:700;color:var(--grey)}
.pwform input{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.or{text-align:center;color:var(--grey);font-size:13px;margin:14px 0 4px}
.fallback{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:left}
.fallback summary{cursor:pointer;font-size:13px;color:var(--grey);list-style:none;text-align:center}
.fallback summary::-webkit-details-marker{display:none}
.fallback summary:hover{color:var(--blue);text-decoration:underline}
.fallback[open] summary{margin-bottom:12px;color:var(--ink)}
.err{background:var(--error-bg);border:1px solid var(--error-line);color:var(--error);padding:10px 14px;border-radius:8px;font-size:14px;margin-bottom:16px;text-align:left}

@media (max-width:720px){
  main{padding:18px 16px 60px}
  .top,.tabs{padding-left:16px;padding-right:16px}
  .row{grid-template-columns:1fr;gap:12px}
  .prow{grid-template-columns:1fr;gap:10px}
  .pnum{padding-top:0}
  .acts{justify-content:flex-start}
  .tabs{overflow-x:auto}
  .tabgap{flex:0 0 12px}
  .sheet{padding:26px 20px 28px}
}