/* JCV Swine Training & Development — unified 2026 interface */
:root{
  --orange:#f4511e;--orange-dark:#d93e0d;--ink:#15211d;--muted:#68776f;
  --line:#dde6e1;--soft:#f4f7f5;--cream:#fff8f4;--peach:#ffebe3;
  --white:#fff;--green:#16875f;--shadow:0 12px 35px rgba(25,48,38,.08);
  --shadow-soft:0 5px 18px rgba(25,48,38,.055);--radius:16px
}
body{background:#f4f7f5;color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--role-accent,var(--orange)) 25%,transparent);outline-offset:2px}
.primary,.secondary{min-height:42px;border-radius:10px;padding:10px 17px;font-size:12px;box-shadow:none}.primary{border-color:var(--role-accent,var(--orange));background:var(--role-accent,var(--orange))}.primary:hover{background:color-mix(in srgb,var(--role-accent,var(--orange)) 86%,#111);box-shadow:0 8px 18px color-mix(in srgb,var(--role-accent,var(--orange)) 22%,transparent)}.secondary{border-color:color-mix(in srgb,var(--role-accent,var(--orange)) 35%,var(--line));color:var(--role-accent,var(--orange))}.secondary:hover{background:color-mix(in srgb,var(--role-accent,var(--orange)) 8%,white)}
.portal-shell{grid-template-columns:278px minmax(0,1fr);background:#f2f6f4}.portal-shell[data-role=admin]{--role-accent:#5b4bc4;--role-soft:#f0edff}.portal-shell[data-role=manager]{--role-accent:#13845e;--role-soft:#e8f7f0}.portal-shell[data-role=employee]{--role-accent:#f4511e;--role-soft:#fff0e9}
.portal-sidebar{background:linear-gradient(180deg,#15231e 0%,#101914 100%);padding:18px 14px;border-right:1px solid #2b3b34}.sidebar-brand{padding:0 6px 18px}.sidebar-brand .brand{width:100%;height:86px;border-radius:13px;background:#fff;padding:10px 13px;filter:none;box-shadow:0 8px 24px rgba(0,0,0,.18)}.sidebar-brand .brand img{object-fit:contain}.sidebar-brand>span{display:block;width:max-content;margin:12px 0 0;background:color-mix(in srgb,var(--role-accent) 88%,#fff);border-radius:999px;padding:6px 11px;font-size:9px}
.portal-sidebar nav{gap:4px;margin-top:14px}.portal-sidebar nav button{min-height:46px;border-radius:10px;padding:10px 12px;color:#b9c7c0;font-size:11px}.portal-sidebar nav button:hover{background:#24352e;color:#fff;transform:translateX(2px)}.portal-sidebar nav button.active{background:linear-gradient(135deg,var(--role-accent),color-mix(in srgb,var(--role-accent) 75%,#111));box-shadow:0 9px 22px color-mix(in srgb,var(--role-accent) 28%,transparent)}.portal-sidebar nav .icon{width:18px;height:18px}.sidebar-support{border-color:#33473e;background:#1b2c24}.sidebar-logout{margin-top:5px}
.portal-topbar{height:78px;border-color:#e1e8e4;padding:0 34px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}.portal-search{height:44px;max-width:590px;border-radius:12px;background:#f5f8f6;border-color:#e0e8e4}.portal-search:focus-within{background:#fff;border-color:color-mix(in srgb,var(--role-accent) 45%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--role-accent) 8%,transparent)}.round-button{background:#f2f6f4;border:1px solid #e3eae6}.context-chip{background:var(--role-soft);color:var(--role-accent);padding:8px 12px}.profile-button{padding:5px 8px;border-radius:12px}.profile-button:hover{background:#f4f7f5}.avatar-initials{width:42px;height:42px}
.portal-content{max-width:1680px;padding:34px clamp(22px,3vw,48px) 64px}.portal-heading{display:flex;align-items:flex-end;min-height:86px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid #dfe7e3}.portal-heading h1{font-size:30px;line-height:1.2;letter-spacing:-.8px}.portal-heading p{font-size:12px;line-height:1.6;max-width:760px}.eyebrow{color:var(--role-accent,var(--orange));font-size:10px;letter-spacing:1.5px}
.data-panel,.role-kpi,.managed-course,.question-card,.quiz-map,.progress-chart,.goal-card,.instruction-list,.approval-overview-card{border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)}.data-panel{padding:24px}.panel-heading h2{font-size:18px}.panel-heading p{font-size:11px;line-height:1.55}.role-hero,.report-toolbar,.fourq-intro{border:0;border-radius:20px;padding:32px 34px;box-shadow:var(--shadow);overflow:hidden;position:relative}.role-hero:after,.report-toolbar:after{content:'';position:absolute;right:-70px;top:-90px;width:230px;height:230px;border-radius:50%;background:color-mix(in srgb,var(--role-accent) 10%,transparent)}.admin-hero{background:linear-gradient(125deg,#f2efff,#fff 68%)}.manager-hero{background:linear-gradient(125deg,#e9f8f1,#fff 68%)}.compact-hero{background:linear-gradient(125deg,#fff0e9,#fff 68%)}
.role-kpi-grid{gap:18px}.role-kpi{min-height:108px;padding:20px;background:#fff;transition:.2s}.role-kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.role-kpi>span{width:48px;height:48px;border-radius:13px}.role-kpi b{font-size:26px}.role-kpi small{font-size:10px}.role-dashboard-grid,.report-grid,.certificate-admin-grid,.assessment-layout,.video-session-grid{gap:22px}.task-list button{padding:15px 4px}.task-list button:hover{background:var(--role-soft)}
.data-table{font-size:11px}.data-table th{padding:13px 15px;background:#f2f6f4;color:#64736b;font-size:9px}.data-table td{padding:15px;border-color:#e7ece9}.data-table tbody tr:hover{background:#fafcfb}.status-badge{font-size:9px;padding:6px 9px}.table-scroll{border-radius:0 0 var(--radius) var(--radius)}
.learning-form{gap:20px}.learning-form label,.registration-form label{font-size:12px;color:#31433a}.learning-form input,.learning-form select,.learning-form textarea,.quick-form input,.quick-form select,.account-create input,.account-create select,.assessment-builder input,.assessment-builder select,.assessment-builder textarea,.registration-form input,.registration-form select{min-height:44px;border-radius:10px;border-color:#d8e2dd;background:#fbfdfc;font-size:12px}.learning-form input:focus,.learning-form select:focus,.learning-form textarea:focus{background:#fff;border-color:var(--role-accent)}.learning-form fieldset{border-radius:14px;background:#fafcfb}.learning-cards{gap:22px}.learning-cards .data-panel{transition:.2s}.learning-cards .data-panel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.toolbar-panel{border-radius:14px;box-shadow:var(--shadow-soft);padding:13px 16px}.segmented{border-radius:10px}.segmented button{border-radius:8px;font-size:10px}.inline-search{height:42px;border-radius:10px}.approval-type-tabs button{border-radius:14px;box-shadow:var(--shadow-soft);padding:20px}.approval-type-tabs button:hover{transform:translateY(-2px)}.approval-overview-card{padding:20px 22px}.approval-overview-card:hover{border-color:color-mix(in srgb,var(--role-accent) 35%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow)}.approval-detail-lesson{border-radius:14px;box-shadow:var(--shadow-soft);padding:16px}.approval-detail-toolbar{border-radius:14px}
.planner-summary article{border-radius:14px;box-shadow:var(--shadow-soft)}.planner-calendar,.planner-editor,.planner-batch{box-shadow:var(--shadow-soft)}.planner-calendar .calendar-day{min-height:76px;border-radius:11px}.planner-calendar .calendar-day:hover{transform:translateY(-2px);box-shadow:0 6px 13px rgba(25,48,38,.08)}.manager-session{border-radius:20px;background:linear-gradient(125deg,#0d6f4d,#1fa876);box-shadow:0 16px 32px rgba(19,132,94,.2)}
.course-card{border-radius:17px;box-shadow:var(--shadow-soft);transition:.2s}.course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.course-image{height:190px}.progress-track{height:8px}.progress-track i{background:var(--role-accent,var(--orange))}.employee-picker label{border-radius:11px;background:#fff}.employee-picker label:has(input:checked){border-color:var(--role-accent);background:var(--role-soft)}
.learning-dialog,.rejection-dialog{border:0;border-radius:20px;box-shadow:0 30px 80px rgba(10,25,18,.28)}.learning-dialog::backdrop,.rejection-dialog::backdrop{background:rgba(10,25,18,.58);backdrop-filter:blur(3px)}.toast{border-radius:12px;background:#14231c;box-shadow:0 15px 40px rgba(0,0,0,.22)}
.login-page{background:#fff}.login-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(16,32,25,.18),rgba(16,32,25,.55))}.login-copy{z-index:1}.login-panel{background:linear-gradient(180deg,#fff,#f8faf9)}.login-box .brand{width:290px;height:150px;margin-bottom:18px}.login-box input[type=text],.login-box input[type=password],.login-box input[type=email],.login-box form>label>input{height:52px;border-radius:11px;background:#f7faf8}.demo-row button{border-radius:8px}.site-header .brand{width:190px}.hero{background:linear-gradient(135deg,#fff6f1,#f7faf8)}
.portal-shell[data-role=employee] .portal-heading{border-bottom-color:#f1ddd5}.portal-shell[data-role=manager] .portal-heading{border-bottom-color:#d5e9df}.portal-shell[data-role=admin] .portal-heading{border-bottom-color:#ded9f2}
@media(max-width:1180px){.portal-shell{grid-template-columns:238px}.portal-sidebar{padding-left:10px;padding-right:10px}.sidebar-brand .brand{height:78px}.portal-topbar{padding:0 22px}}
@media(max-width:850px){.portal-sidebar{width:280px}.portal-content{padding:26px 18px 50px}.portal-heading{min-height:auto}.role-kpi-grid{gap:12px}.portal-topbar{height:68px}.data-panel{padding:20px}}
@media(max-width:600px){.login-page{display:block}.login-visual{display:none}.login-panel{min-height:100vh;padding:30px 22px}.login-box .brand{width:250px;height:125px}.portal-heading h1{font-size:24px}.role-kpi-grid{grid-template-columns:1fr}.role-hero,.report-toolbar,.fourq-intro{padding:24px}.data-panel{padding:17px}.approval-detail-lesson{padding:12px}.planner-calendar .calendar-day{min-height:54px}.primary,.secondary{width:auto;min-height:42px}}

/* YouTube upload and ordered learning path */
.youtube-admin{margin:22px 0}.youtube-status{padding:7px 10px;border-radius:999px;background:#fff0e8;color:#b63b13;font-size:9px;font-weight:800}.youtube-status.ready{background:#e7f8ef;color:#11754e}.youtube-warning{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;border:1px solid #f5d9a8;border-radius:11px;background:#fff9ec;color:#7b4d00;font-size:9px;line-height:1.55}.youtube-warning b{white-space:nowrap}.youtube-admin details{border:1px solid var(--line);border-radius:12px;margin:14px 0;padding:13px 15px;background:#fafcfb}.youtube-admin summary{cursor:pointer;font-size:11px;font-weight:800;color:var(--role-accent)}.youtube-config-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:13px}.youtube-config-form label{font-size:11px;font-weight:700}.youtube-config-form input{display:block;width:100%;height:43px;border:1px solid var(--line);border-radius:9px;padding:0 11px;margin-top:6px}.youtube-help{font-size:9px;color:var(--muted);line-height:1.6}.youtube-file{grid-column:1/-1}.youtube-file input{padding:9px}.youtube-file small{font-size:8px;color:var(--muted);font-weight:400}.youtube-progress{grid-column:1/-1;position:relative;height:34px;background:#edf1ef;border-radius:9px;overflow:hidden}.youtube-progress i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--role-accent) 23%,white);transition:width .25s}.youtube-progress span{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:700}.compact-form{grid-template-columns:2fr 2fr 2fr 1fr auto}.youtube-library{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.youtube-library h3{font-size:14px}.youtube-library article{padding:12px 0;border-top:1px solid #e7ece9}.youtube-library article>b{font-size:11px}.youtube-library p{display:grid;grid-template-columns:60px 1fr 100px auto auto auto;gap:8px;align-items:center;font-size:10px}.youtube-library p>span{font-weight:800;color:var(--role-accent)}.youtube-library p>small{color:var(--muted)}.youtube-library p button,.youtube-open-link{padding:7px 9px;min-height:34px}.youtube-open-link{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}.youtube-course{margin-top:20px}.youtube-course .panel-heading>strong{font-size:13px;color:var(--role-accent)}.youtube-lesson-row{width:100%;display:grid;grid-template-columns:42px 1fr auto;gap:13px;align-items:center;border:0;border-top:1px solid var(--line);background:#fff;padding:14px 4px;text-align:left}.youtube-lesson-row:hover:not(:disabled){background:var(--role-soft)}.youtube-lesson-row:disabled{cursor:not-allowed;opacity:.5}.youtube-lesson-row>span{width:36px;height:36px;border-radius:10px;background:var(--role-soft);color:var(--role-accent);display:grid;place-items:center;font-weight:800}.youtube-lesson-row b,.youtube-lesson-row small{display:block}.youtube-lesson-row b{font-size:11px}.youtube-lesson-row small{font-size:8px;color:var(--muted);margin-top:4px}.youtube-lesson-row>i{font-style:normal;color:var(--role-accent)}.youtube-lesson-row.completed>span{background:#16875f;color:#fff}.youtube-player{aspect-ratio:16/9;background:#000;border-radius:13px;overflow:hidden;clear:both}.youtube-player iframe{width:100%;height:100%;border:0;margin:0}.youtube-player-unavailable{aspect-ratio:16/9;display:grid;place-content:center;gap:8px;text-align:center;border-radius:13px;background:#232525;color:#fff;padding:30px}.youtube-player-unavailable b{font-size:16px}.youtube-player-unavailable span{font-size:10px;color:#dfe5e2}.youtube-player-actions{display:flex;flex-wrap:wrap;gap:8px;clear:both;margin:12px 0}.youtube-player-actions .secondary{float:none!important;margin:0;text-decoration:none}.youtube-playback-help{padding:10px 12px;border-radius:9px;background:#fff7e8;color:#7b4d00;font-size:9px}@media(max-width:850px){.compact-form{grid-template-columns:1fr 1fr}.youtube-library p{grid-template-columns:55px 1fr auto auto}.youtube-library p>small{display:none}}@media(max-width:600px){.youtube-config-form,.compact-form{grid-template-columns:1fr}.youtube-warning{display:grid}.youtube-library p{grid-template-columns:1fr 1fr}.youtube-library p button,.youtube-open-link{width:100%}.youtube-file{grid-column:auto}}

/* Approved video sessions: Admin library -> calendar -> playback -> report. */
.linked-video-hint{display:block;margin-top:6px;color:var(--muted);font-size:9px;font-weight:500}.linked-training-layout{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr) minmax(250px,330px);gap:16px;align-items:start}.approved-session-list{padding:17px}.approved-session-list .panel-heading{margin-bottom:9px}.approved-session-item{width:100%;display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:11px 8px;border:0;border-top:1px solid var(--line);background:#fff;text-align:left;border-radius:8px}.approved-session-item:hover,.approved-session-item.active{background:var(--role-soft)}.approved-session-item>span{width:38px;height:42px;display:grid;place-content:center;text-align:center;border-radius:9px;background:#eef4f1;color:var(--role-accent)}.approved-session-item>span b{font-size:16px;line-height:1}.approved-session-item>span small{font-size:7px}.approved-session-item div>b,.approved-session-item div>small,.approved-session-item div>p{display:block;margin:0}.approved-session-item div>small{font-size:7px;color:var(--role-accent);font-weight:800}.approved-session-item div>b{font-size:10px;margin:3px 0;line-height:1.35}.approved-session-item div>p{font-size:8px;color:var(--muted)}.approved-session-item>i{font-style:normal;color:var(--role-accent);font-weight:800}.approved-session-item.completed>i{color:#16875f}.linked-session-detail{min-width:0}.linked-live-session{padding:18px}.linked-session-player{aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#111}.linked-session-player iframe{width:100%;height:100%;border:0}.linked-session-missing{aspect-ratio:16/9;display:grid;place-content:center;text-align:center;padding:24px;border-radius:12px;background:#fff6e9;color:#8a5200}.linked-session-missing b{font-size:14px}.linked-session-missing p{font-size:9px}.linked-live-session .session-info{padding:14px 2px 8px}.linked-live-session .session-info h2{margin:8px 0 5px;font-size:17px}.linked-live-session .session-info p{font-size:9px;line-height:1.55}.linked-live-session .session-info a{font-size:9px;color:var(--role-accent)}.start-session{width:100%;margin:8px 0 16px}.linked-attendance{padding:17px}.linked-attendance .session-rating,.linked-attendance .session-notes{display:grid!important;grid-template-columns:1fr!important;gap:6px;padding:13px 0!important;margin-top:5px;border-top:1px solid var(--line)}.session-rating select,.session-notes textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px;background:#fff;font:inherit}.session-notes textarea{min-height:85px;resize:vertical}.completed-session-summary>span{display:inline-block;padding:7px 10px;border-radius:99px;background:#e4f6ed;color:#147953;font-size:8px;font-weight:800}.completed-session-summary>div{display:grid;grid-template-columns:repeat(3,auto 1fr);gap:8px;align-items:end;margin:18px 0;padding:14px;border-radius:10px;background:#f5f8f6}.completed-session-summary>div b{font-size:19px;color:var(--role-accent)}.completed-session-summary>div small{font-size:8px;color:var(--muted)}.empty-video-training{text-align:center;padding:44px}.empty-video-training p{max-width:560px;margin:10px auto 20px;color:var(--muted)}@media(max-width:1180px){.linked-training-layout{grid-template-columns:260px minmax(0,1fr)}.linked-attendance{grid-column:2}}@media(max-width:760px){.linked-training-layout{grid-template-columns:1fr}.linked-attendance{grid-column:auto}.approved-session-list{max-height:390px;overflow:auto}.completed-session-summary>div{grid-template-columns:auto 1fr}}