/* Broward College FILM — Internship Course site
   Bright theme. Standalone from the FilmDocs app, but defines the same
   token names the shared modules (filmdocs-pickers, fd-dialog) read, so
   the vendored pickers render correctly on the light background. */

:root{
  /* brand */
  --bc-blue:#1a5dab;          /* Broward FILM logo blue */
  --bc-blue-deep:#123f77;
  --bc-blue-bright:#2f7cd6;
  --bc-gold:#d99b2b;
  --ok:#1e8e4d;
  --danger:#c0392b;

  /* surfaces */
  --page-bg:#eef2f7;
  --surface:#ffffff;
  --surface-dim:#f6f8fb;
  --border:#d7dee8;
  --border-strong:#b9c5d4;
  --input-bg:#ffffff;

  /* text */
  --text:#17263b;
  --text-dim:#5b6b80;

  /* tokens the vendored pickers/dialog read */
  --shade-rgb:23,38,59;
  --pk-accent:var(--bc-blue);
  --pk-bg:#ffffff;
  --pk-bg-strong:#eef4fb;
  --pk-border:var(--border-strong);
  --cat-color:var(--bc-blue);
  --cat-bg:#eef4fb;
  --cat-border:var(--border-strong);
  --fdlg-accent:var(--bc-blue);
  --fdlg-hover-b:1.18;          /* a number: it feeds filter:brightness() */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--text);
  font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ---------- header / nav ---------- */
.site-head{
  background:var(--surface);
  border-bottom:3px solid var(--bc-blue);
  box-shadow:0 1px 6px rgba(23,38,59,.06);
}
.site-head-inner{
  max-width:1040px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.bc-logo{display:block;text-decoration:none;flex-shrink:0;}
.bc-logo img{height:54px;width:auto;display:block;}
.site-title{min-width:0;}
.site-title h1{margin:0;font-size:17px;font-weight:800;letter-spacing:-.2px;color:var(--bc-blue-deep);}
.site-title .sub{font-size:11.5px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
.site-nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;}
.site-nav a{
  text-decoration:none;color:var(--text-dim);font-size:12.5px;font-weight:700;
  padding:7px 12px;border-radius:7px;transition:all .15s;
}
.site-nav a:hover{background:var(--surface-dim);color:var(--bc-blue);}
.site-nav a.active{background:var(--bc-blue);color:#fff;}

.user-chip{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--border);}
.user-chip .uc-name{font-size:12px;font-weight:700;color:var(--text-dim);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-chip .uc-out{
  font:inherit;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--bc-blue);background:none;border:1px solid var(--border-strong);border-radius:6px;
  padding:5px 10px;cursor:pointer;transition:all .15s;
}
.user-chip .uc-out:hover{border-color:var(--bc-blue);background:#f2f7fd;}

/* ---------- page scaffold ---------- */
.wrap{max-width:1040px;margin:0 auto;padding:26px 24px 80px;}
.paper{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 2px 14px rgba(23,38,59,.07);
  padding:28px 32px;margin-bottom:22px;
}
@media (max-width:640px){.paper{padding:20px 16px;}}

.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.page-head h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.3px;color:var(--bc-blue-deep);}
.page-head .page-sub{font-size:12.5px;color:var(--text-dim);margin-top:3px;}
.page-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border-strong);border-radius:8px;
  background:var(--surface);color:var(--text);
  font:inherit;font-size:12.5px;font-weight:700;
  padding:8px 14px;cursor:pointer;transition:all .15s;text-decoration:none;
}
.btn:hover{border-color:var(--bc-blue);color:var(--bc-blue);}
.btn.primary{background:var(--bc-blue);border-color:var(--bc-blue);color:#fff;}
.btn.primary:hover{background:var(--bc-blue-deep);border-color:var(--bc-blue-deep);color:#fff;}
.btn.danger{color:var(--danger);border-color:#e4b6b1;}
.btn.danger:hover{background:#fdf1ef;border-color:var(--danger);}
.btn svg{flex-shrink:0;}

/* ---------- sections & fields ---------- */
.sec-h{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--bc-blue);margin:26px 0 12px;padding-bottom:6px;
  border-bottom:2px solid #e3ebf5;
}
.sec-h:first-child{margin-top:0;}
.sec-note{font-size:12px;color:var(--text-dim);margin:-6px 0 12px;line-height:1.55;}

.fgrid{display:grid;gap:12px 16px;}
.fgrid.c2{grid-template-columns:1fr 1fr;}
.fgrid.c3{grid-template-columns:1fr 1fr 1fr;}
.fgrid.c4{grid-template-columns:1fr 1fr 1fr 1fr;}
@media (max-width:820px){.fgrid.c3,.fgrid.c4{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.fgrid.c2,.fgrid.c3,.fgrid.c4{grid-template-columns:1fr;}}

.field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.field label{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-dim);
}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:13.5px;color:var(--text);
  background:var(--input-bg);border:1px solid var(--border-strong);border-radius:7px;
  padding:9px 11px;outline:none;transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--bc-blue);box-shadow:0 0 0 3px rgba(26,93,171,.13);
}
.field input::placeholder,.field textarea::placeholder{color:#78879a;}
.field textarea{resize:none;min-height:96px;line-height:1.55;}
.field .hint{font-size:11px;color:var(--text-dim);}

/* segmented choice (e.g. Volunteer / Paid, Mid-term / End-of-term) */
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;}
.seg button{
  font:inherit;font-size:12.5px;font-weight:700;color:var(--text-dim);
  background:var(--surface);border:none;padding:8px 16px;cursor:pointer;transition:all .15s;
}
.seg button + button{border-left:1px solid var(--border-strong);}
.seg button.on{background:var(--bc-blue);color:#fff;}

/* ---------- rating grids (Likert / 1–6 scales) ---------- */
.rate-table{width:100%;border-collapse:collapse;table-layout:fixed;}
/* every choice column the same width, so the circles sit on an even grid —
   auto layout sized them by header text ("Neither agree nor disagree" wide,
   "N/A" narrow) and the dots came out staggered. */
.rate-table th.q,.rate-table td.q{width:38%;}
.rate-table th:not(.q),.rate-table td:not(.q){width:10.33%;}
.rate-table th{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-dim);padding:8px 4px;text-align:center;vertical-align:bottom;line-height:1.3;
}
.rate-table th.q{text-align:left;}
.rate-table td{border-top:1px solid var(--border);padding:9px 4px;text-align:center;}
.rate-table td.q{text-align:left;font-size:12.5px;line-height:1.45;padding-right:12px;}
.rate-table tr.group td{
  background:#eef4fb;color:var(--bc-blue-deep);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:7px 10px;
  border-top:none;
}
.rate-dot{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);
  background:#fff;cursor:pointer;display:inline-block;vertical-align:middle;
  transition:all .12s;padding:0;
}
.rate-dot:hover{border-color:var(--bc-blue-bright);}
.rate-dot.on{border-color:var(--bc-blue);background:var(--bc-blue);box-shadow:inset 0 0 0 3px #fff;}
.rate-scale-note{font-size:11.5px;color:var(--text-dim);margin:8px 0 14px;font-weight:600;}

/* ---------- signatures ---------- */
.sig-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
.sig-row.c3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:860px){.sig-row,.sig-row.c3{grid-template-columns:1fr;}}
.sig-block{display:flex;flex-direction:column;gap:6px;}
.sig-label{font-size:10.5px;font-weight:800;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
.sig-pad-wrap{position:relative;border:1px solid var(--border-strong);border-radius:8px;background:#fff;}
.sig-pad-wrap.signed{border-color:var(--ok);}
.sig-pad{display:block;cursor:crosshair;border-radius:8px;width:100%;height:110px;background:#fff;touch-action:none;}
.sig-pad-clear{
  position:absolute;top:6px;right:6px;background:rgba(23,38,59,.45);color:#fff;border:none;
  border-radius:5px;padding:3px 9px;font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;
}
.sig-pad-clear:hover{background:rgba(23,38,59,.7);}
.sig-hint{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#b6c2d1;font-size:12px;font-weight:600;pointer-events:none;
}
.sig-meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text-dim);flex-wrap:wrap;}
.sig-meta .sig-date-in{
  width:150px;font:inherit;font-size:13px;color:var(--text);
  background:var(--input-bg);border:1px solid var(--border-strong);border-radius:7px;
  padding:8px 10px;outline:none;transition:border-color .15s, box-shadow .15s;
}
.sig-meta .sig-date-in:focus{border-color:var(--bc-blue);box-shadow:0 0 0 3px rgba(26,93,171,.13);}

/* ---------- status pills / progress ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;border-radius:20px;padding:4px 11px;
}
.pill.done{background:#e3f3ea;color:#136c39;}
.pill.todo{background:#eef1f5;color:var(--text-dim);}
.pill.part{background:#fdf3e0;color:#7d520c;}

.hours-bar{height:12px;border-radius:8px;background:#e3e9f1;overflow:hidden;position:relative;}
.hours-bar .fill{height:100%;background:linear-gradient(90deg,var(--bc-blue-bright),var(--bc-blue));border-radius:8px;transition:width .3s;}
.hours-bar .goalmark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--bc-gold);}

/* ---------- home cards ---------- */
.form-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:720px){.form-cards{grid-template-columns:1fr;}}
.form-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:18px 20px;transition:all .15s;box-shadow:0 1px 6px rgba(23,38,59,.05);
}
.form-card:hover{border-color:var(--bc-blue);box-shadow:0 4px 18px rgba(26,93,171,.14);transform:translateY(-1px);}
.form-card .fc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.form-card .fc-num{
  width:28px;height:28px;border-radius:8px;background:var(--bc-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
}
.form-card h3{margin:0;font-size:14.5px;font-weight:800;color:var(--bc-blue-deep);flex:1;}
.form-card p{margin:0;font-size:12.5px;color:var(--text-dim);line-height:1.55;}
.form-card .fc-status{margin-top:10px;}

/* internship cards (home) */
.intern-list{display:flex;flex-direction:column;gap:8px;}
.intern-card{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--surface-dim);
}
.intern-card.on{border-color:var(--bc-blue);background:#f2f7fd;}
.intern-card .ic-main{flex:1;min-width:200px;}
.intern-card .ic-org{font-size:14px;font-weight:800;color:var(--bc-blue-deep);}
.intern-card .ic-sub{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.intern-card .ic-hrs{font-size:13px;color:var(--text-dim);white-space:nowrap;}
.intern-card .ic-hrs .hrs-num{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.intern-card .ic-actions{display:flex;gap:6px;align-items:center;}
.site-title .sub-site{color:var(--bc-blue);}

/* policies list */
.policy-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.policy-list li{
  display:flex;gap:12px;font-size:13px;line-height:1.6;color:var(--text);
  background:var(--surface-dim);border:1px solid var(--border);border-radius:9px;padding:12px 15px;
}
.policy-list .p-ico{flex-shrink:0;font-size:16px;line-height:1.4;}
.policy-list b{color:var(--bc-blue-deep);}

/* ---------- timesheet table ---------- */
.ts-table{width:100%;border-collapse:collapse;}
.ts-table th{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-dim);text-align:left;padding:8px 8px;border-bottom:2px solid #e3ebf5;
}
.ts-table td{padding:5px 5px;border-bottom:1px solid var(--border);}
.ts-table input{
  width:100%;font:inherit;font-size:13px;color:var(--text);background:var(--input-bg);
  border:1px solid var(--border-strong);border-radius:6px;padding:7px 9px;outline:none;
}
.ts-table input:focus{border-color:var(--bc-blue);box-shadow:0 0 0 3px rgba(26,93,171,.13);}
.ts-table .tot{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;padding-right:12px;}
.ts-totrow td{border-bottom:none;padding-top:8px;font-size:13px;}
.ts-totrow .lab{text-align:right;font-weight:800;color:var(--text-dim);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
.ts-totrow .val{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;padding-right:12px;color:var(--bc-blue-deep);}

.week-card{border:1px solid var(--border);border-radius:11px;padding:18px 20px;margin-bottom:18px;background:var(--surface);}
.week-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.week-head .wk-num{
  background:var(--bc-blue);color:#fff;font-weight:800;font-size:12px;
  border-radius:7px;padding:5px 11px;letter-spacing:.04em;
}
.week-head .wk-range{font-size:12.5px;color:var(--text-dim);font-weight:600;}
.week-head .wk-del{margin-left:auto;}

.ts-table tr.add-row-tr td{border-bottom:none;padding-top:6px;}
.add-row-btn{
  width:100%;border:1px dashed var(--border-strong);border-radius:7px;background:none;
  color:var(--text-dim);font:inherit;font-size:12px;font-weight:700;padding:7px 8px;
  cursor:pointer;transition:all .15s;
}
.add-row-btn:hover{border-color:var(--bc-blue);color:var(--bc-blue);background:#f2f7fd;}
.ts-table td.row-x{text-align:center;padding-left:0;padding-right:0;}
.ts-table .rm-row{
  border:none;background:none;color:#b4bfcd;font-size:19px;line-height:1;cursor:pointer;
  padding:2px 6px;border-radius:5px;transition:all .12s;
}
.ts-table .rm-row:hover{color:var(--danger);background:#fdf1ef;}

.add-week-btn{
  width:100%;border:2px dashed var(--border-strong);border-radius:11px;background:none;
  color:var(--text-dim);font:inherit;font-size:13px;font-weight:700;padding:14px;
  cursor:pointer;transition:all .15s;
}
.add-week-btn:hover{border-color:var(--bc-blue);color:var(--bc-blue);background:#f2f7fd;}

/* stat tiles (counts only — money never fits 4-up, n/a here) */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
@media (max-width:640px){.stat-grid{grid-template-columns:1fr 1fr;}}
.stat-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:var(--surface-dim);border:1px solid var(--border);border-radius:10px;padding:13px 8px;
}
.stat-tile .sv{font-size:20px;font-weight:800;color:var(--bc-blue-deep);font-variant-numeric:tabular-nums;}
.stat-tile .sl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);}

/* saved indicator */
.save-note{font-size:11.5px;color:var(--text-dim);font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.save-note .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);}

/* footer */
.site-foot{
  max-width:1040px;margin:0 auto;padding:0 24px 40px;
  font-size:11.5px;color:var(--text-dim);text-align:center;
}
.site-foot a{color:var(--bc-blue);font-weight:700;text-decoration:none;}

/* print: forms are exported via jsPDF, keep screen simple */
@media print{.site-head,.page-actions,.add-week-btn,.site-foot{display:none!important;}}

/* informational variant of the auth error box (login.html) */
.auth-err.ok{background:#eef4fb;border-color:#c7dcf3;color:var(--bc-blue-deep);}

/* remote-signature status rows */
.sig-status-row{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;}
.sig-status{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface-dim);border:1px solid var(--border);border-radius:9px;padding:9px 13px;
}
.sig-status .sst{font-size:12.5px;color:var(--text-dim);flex:1;min-width:140px;}
.sig-status .btn{padding:5px 11px;font-size:11.5px;}

.sig-status.stale{background:#fdf6e8;border-color:#e6d3ac;}
.sig-status.stale .sst{color:#8a6420;}

/* cloud-state banners (sync failure / stale tab) */
.cloud-banner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 22px;font-size:13px;line-height:1.55;
}
.cloud-banner.danger{background:#fdf1ef;border-bottom:2px solid var(--danger);color:#7d2a20;}
.cloud-banner.warn{background:#fdf6e8;border-bottom:2px solid var(--bc-gold);color:#8a6420;}
.cloud-banner .cb-text{flex:1;min-width:220px;}
.cloud-banner .cb-btn{
  font:inherit;font-size:12px;font-weight:800;padding:7px 14px;border-radius:7px;cursor:pointer;
  background:var(--surface);border:1px solid currentColor;color:inherit;
}
.save-label{font-weight:700;}

/* ---------- phone: rating grids and the week table ----------
   At 390px the question column alone was wider than the viewport: at rest not
   one rating circle was on screen, and scrolling across to reach them pushed
   the questions AND the column headers out of view, so you tapped blind. Pin
   the question column and the header row, and show that it scrolls. */
@media (max-width:760px){
  .tbl-scroll{position:relative;-webkit-overflow-scrolling:touch;}
  .tbl-scroll::after{
    content:'';position:sticky;top:0;right:0;float:right;width:26px;height:100%;
    pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92));
  }
  .rate-table{min-width:620px;}
  .rate-table th.q,.rate-table td.q{
    position:sticky;left:0;z-index:2;background:var(--surface);
    width:46%;box-shadow:1px 0 0 var(--border);
  }
  .rate-table tr.group td{position:sticky;left:0;z-index:2;}
  .rate-table thead th{position:sticky;top:0;z-index:3;background:var(--surface);}
  .rate-table thead th.q{z-index:4;}
  .rate-table th:not(.q),.rate-table td:not(.q){width:9%;}
  .rate-table td.q{font-size:12px;}
  .rate-table td.q .d{font-size:11px;}

  /* the week table truncated every date to "September" and clipped the times */
  .ts-table{table-layout:fixed;width:100%;}
  .ts-table th,.ts-table td{padding:4px 3px;}
  .ts-table input{font-size:12px;padding:7px 6px;}
  .ts-table th{font-size:9.5px;}
  .week-card,.paper.week-card{padding:14px 12px;}
}
@media (max-width:430px){
  .ts-table input{font-size:11.5px;padding:6px 5px;}
}