/* =========================================================
   Vetta LMS — shared styles
   Same design language as the approved mockup and the main
   Vetta site: Cormorant Garamond + Karla, petrol/gold palette.
   ========================================================= */
:root{
  --petrol:#0D2B2E; --petrol-deep:#081C1E; --petrol-2:#123539;
  --gold:#C9A15C; --gold-bright:#E3C27D; --gold-dim:rgba(201,161,92,.28); --gold-glow:rgba(201,161,92,.35);
  --alabaster:#F3EFE7; --paper:#FBF9F4;
  --ink:#16282A; --ink-soft:#3E5457;
  --line-on-light:rgba(13,43,46,.12); --line-on-dark:rgba(251,249,244,.14);
  --shadow-md:0 18px 44px -22px rgba(8,28,30,.35); --shadow-lg:0 24px 60px -28px rgba(8,28,30,.45);
  --radius-lg:22px; --radius-md:14px; --radius-sm:9px;
  --good:#3D8361; --bad:#B3492B;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--alabaster);color:var(--ink);font-family:'Karla',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Cormorant Garamond',ui-serif,Georgia,serif;margin:0;font-weight:600;color:var(--petrol);letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:14px;}
[hidden]{display:none!important;}

/* ---- app shell (rail + stage) ---- */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;}
.rail{background:var(--petrol);color:var(--paper);padding:26px 18px;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
.rail-brand{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--paper);margin-bottom:2px;}
.rail-brand span{color:var(--gold-bright);}
.rail-sub{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,249,244,.5);margin-bottom:26px;}
.rail-group{margin-bottom:22px;}
.rail-group h5{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 8px 4px;font-weight:800;}
.rail-btn{display:flex;align-items:center;width:100%;min-height:44px;box-sizing:border-box;text-align:left;padding:9px 10px;border-radius:9px;font-size:13.5px;color:rgba(251,249,244,.78);margin-bottom:2px;transition:background .15s ease,color .15s ease;}
.rail-btn:hover{background:rgba(251,249,244,.06);color:var(--paper);}
.rail-btn.is-active{background:var(--gold-dim);color:var(--gold-bright);font-weight:700;}
.rail-spacer{flex:1;}
.rail-user{font-size:12px;color:rgba(251,249,244,.6);padding:10px;border-top:1px solid var(--line-on-dark);margin-top:6px;line-height:1.5;}
.rail-user b{color:var(--paper);display:block;font-size:13px;}
.rail-logout{margin-top:6px;color:rgba(251,249,244,.6);font-size:12.5px;font-weight:700;}
.rail-logout:hover{color:var(--gold-bright);}

.stage{padding:40px 46px 80px;max-width:980px;}
.screen{display:none;}
.screen.is-active{display:block;animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.screen-tag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#755828;margin-bottom:10px;}
.screen-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.screen h2{font-size:30px;margin-bottom:8px;}
.screen-note{color:var(--ink-soft);font-size:14.5px;line-height:1.6;max-width:640px;margin-bottom:28px;}
.screen-note b{color:var(--ink);}

/* ---- shared components ---- */
.card{background:var(--paper);border:1px solid var(--line-on-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:14px;transition:all .2s ease;}
.btn-gold{background:var(--gold);color:var(--petrol-deep);}
.btn-gold:hover{background:var(--gold-bright);box-shadow:0 10px 26px -10px var(--gold-glow);}
.btn-gold:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
.btn-outline{border:1px solid var(--line-on-light);color:var(--petrol);}
.btn-outline:hover{border-color:var(--gold);color:#755828;}
.btn-ghost{color:var(--ink-soft);font-weight:700;font-size:13.5px;}
.btn-ghost:hover{color:var(--petrol);}
.btn-danger{color:var(--bad);font-weight:700;font-size:13px;}
.btn-danger:hover{text-decoration:underline;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.full{width:100%;justify-content:center;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.fieldset-reset{border:none;padding:0;margin:0 0 16px;min-width:0;}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line-on-light);background:var(--paper);font-size:14.5px;color:var(--ink);}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);}
.hint{font-size:12px;color:var(--ink-soft);margin-top:6px;}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;}
.tag.ok{background:rgba(61,131,97,.12);color:var(--good);}
.tag.pending{background:var(--gold-dim);color:#755828;}
.tag.bad{background:rgba(179,73,43,.1);color:var(--bad);}
.toast{position:fixed;bottom:26px;right:26px;background:var(--petrol-deep);color:var(--paper);padding:14px 20px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;z-index:100;opacity:0;translate:0 12px;transition:opacity .25s ease, translate .25s ease;pointer-events:none;max-width:360px;}
.toast.show{opacity:1;translate:0 0;}
.toast .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto;}
.toast.is-error .dot{background:var(--bad);}
.loading-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft);padding:20px 0;}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-on-light);border-top-color:var(--gold);animation:spin .8s linear infinite;flex:0 0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty-state{padding:30px;text-align:center;color:var(--ink-soft);font-size:14px;}

/* ---- auth card layout ---- */
.auth-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-card{width:400px;max-width:100%;padding:38px 34px;}
.auth-logo{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--petrol);text-align:center;margin-bottom:6px;}
.auth-logo span{color:var(--gold);}
.auth-title{text-align:center;font-size:22px;margin-bottom:6px;}
.auth-sub{text-align:center;color:var(--ink-soft);font-size:13.5px;margin-bottom:26px;line-height:1.55;}
.otp-boxes{display:flex;gap:9px;justify-content:center;margin:6px 0 4px;}
.otp-boxes input{width:42px;height:52px;text-align:center;font-size:20px;font-weight:700;border-radius:10px;border:1px solid var(--line-on-light);}
.rule-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;}
.rule-list li{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;}
.rule-list li .chk{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line-on-light);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;}
.rule-list li.pass{color:var(--good);}
.rule-list li.pass .chk{background:var(--good);border-color:var(--good);color:#fff;}
.error-box{background:rgba(179,73,43,.08);border:1px solid rgba(179,73,43,.25);border-radius:12px;padding:14px 16px;font-size:13.5px;color:#8C3A22;margin-bottom:18px;line-height:1.5;}
.info-box{background:var(--gold-dim);border:1px solid var(--line-on-light);border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--ink);margin-bottom:18px;line-height:1.5;}

/* ---- course tiles ---- */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.tile{padding:22px;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease;}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.tile .ic{width:44px;height:44px;border-radius:12px;background:var(--petrol);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.tile h4{font-size:17px;margin-bottom:8px;}
.tile .meta{font-size:12px;color:var(--ink-soft);margin-top:8px;}

/* ---- screen header row (title + danger action) ---- */
.screen-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.screen-head-row h2{margin-bottom:0;}
.btn-danger-outline{border:1px solid rgba(179,73,43,.35);color:var(--bad);font-size:13px;padding:9px 16px;flex:0 0 auto;}
.btn-danger-outline:hover{background:rgba(179,73,43,.08);border-color:var(--bad);}
.row-delete-btn{color:var(--bad);font-weight:700;font-size:12px;padding:6px 10px;}
.row-delete-btn:hover{text-decoration:underline;}

/* ---- confirmation modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(8,28,30,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;animation:fadein .15s ease;}
.modal-card{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:440px;width:100%;padding:28px 26px;}
.modal-card .modal-icon{width:42px;height:42px;border-radius:50%;background:rgba(179,73,43,.1);color:var(--bad);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.modal-card h3{font-size:19px;margin-bottom:10px;}
.modal-card .modal-body{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:22px;}
.modal-card .modal-body b{color:var(--ink);}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;}
.btn-danger-solid{background:var(--bad);color:#fff;}
.btn-danger-solid:hover{background:#8C3A22;}
.btn-danger-solid:disabled{opacity:.55;cursor:not-allowed;}

/* ---- materials list ---- */
.mat-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:14px 16px;border:1px solid var(--line-on-light);border-radius:12px;margin-bottom:10px;background:var(--paper);}
.mat-row .ic{width:36px;height:36px;border-radius:9px;background:var(--alabaster);color:var(--petrol);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.mat-row .info{flex:1;min-width:0;}
.mat-row .info b{font-size:14px;display:block;}
.mat-row .info span{font-size:12px;color:var(--ink-soft);}
.mat-row.company-only{border-color:var(--gold-dim);background:var(--gold-dim);}
.mat-row.company-only .ic{background:var(--paper);}

/* ---- quiz ---- */
.quiz-q{padding:22px 24px;margin-bottom:16px;}
.quiz-q .qn{font-size:12px;font-weight:800;color:#755828;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.quiz-q h4{font-size:16.5px;margin-bottom:14px;font-weight:600;font-family:'Karla',sans-serif;color:var(--ink);}
.opt-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;border:1px solid var(--line-on-light);margin-bottom:8px;transition:border-color .15s ease,background .15s ease;cursor:pointer;}
.opt-row:hover{border-color:var(--gold);}
.opt-row input{accent-color:var(--gold);}
.opt-row.selected{border-color:var(--gold);background:var(--gold-dim);}
.score-ring{width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--pct,0)*1%), var(--line-on-light) 0);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.score-ring .inner{width:104px;height:104px;border-radius:50%;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.score-ring .inner b{font-size:26px;color:var(--petrol);}
.score-ring .inner span{font-size:11px;color:var(--ink-soft);}

/* ---- quiz result screen ---- */
.result-card{padding:40px 34px;max-width:420px;margin:22px auto;text-align:center;}
.result-score{font-family:'Cormorant Garamond',ui-serif,Georgia,serif;font-weight:700;font-size:56px;line-height:1;color:var(--petrol);}
.result-percent{font-size:16px;font-weight:700;color:var(--ink-soft);margin-top:6px;letter-spacing:.02em;}
.result-msg{font-weight:700;margin-top:16px;margin-bottom:6px;}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px;}

/* ---- quiz review screen ---- */
.review-q{padding:20px 22px;margin-bottom:14px;}
.review-q .qn{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.opt-row.correct-answer{border-color:var(--good);background:rgba(61,131,97,.1);}
.opt-row.wrong-answer{border-color:var(--bad);background:rgba(179,73,43,.08);}
.opt-row .opt-mark{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.04em;}
.opt-row.correct-answer .opt-mark{color:var(--good);}
.opt-row.wrong-answer .opt-mark{color:var(--bad);}

/* ---- admin tables ---- */
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:10px 14px;border-bottom:1px solid var(--line-on-light);}
.admin-table td{padding:13px 14px;border-bottom:1px solid var(--line-on-light);font-size:14px;vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr.clickable:hover{background:var(--alabaster);cursor:pointer;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--petrol);color:var(--gold-bright);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;}
.chip{display:inline-flex;font-size:11px;font-weight:700;background:var(--alabaster);color:var(--ink-soft);padding:3px 9px;border-radius:999px;margin:2px 3px 2px 0;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.company-result-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:8px 0;border-top:1px solid var(--line-on-light);font-size:13.5px;}
.company-result-row:first-child{border-top:none;}
.company-result-row span:first-child{flex:1;min-width:0;font-weight:600;}
.panel{padding:24px;margin-bottom:22px;}
.inline-form{display:none;padding:20px 22px;margin-top:14px;background:var(--alabaster);border-radius:14px;border:1px dashed var(--line-on-light);}
.inline-form.open{display:block;}
.checklist{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.checklist label{display:flex;align-items:center;gap:7px;font-size:13px;background:var(--paper);border:1px solid var(--line-on-light);padding:8px 12px;border-radius:9px;cursor:pointer;}
.checklist input{accent-color:var(--gold);}
.upload-drop{border:1.5px dashed var(--line-on-light);border-radius:14px;padding:28px;text-align:center;color:var(--ink-soft);font-size:13.5px;cursor:pointer;transition:border-color .15s ease,background .15s ease;position:relative;}
.upload-drop:hover{border-color:var(--gold);background:var(--gold-dim);}
.upload-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.mini-table-input{width:100%;padding:8px 10px;border-radius:7px;border:1px solid var(--line-on-light);font-size:13px;background:var(--paper);}
.mini-table-input.bad{border-color:var(--bad);background:rgba(179,73,43,.05);}
.warn-box{background:var(--gold-dim);border:1px solid var(--line-on-light);border-radius:12px;padding:12px 14px;font-size:13px;color:#755828;margin-bottom:14px;line-height:1.6;}
.company-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:900px){.shell{grid-template-columns:1fr;}.rail{position:relative;top:0;height:auto;}.stage{padding:28px 20px 60px;}.company-col{grid-template-columns:1fr;}}