/* LMS 11.3 — Pilot UX, BK, Daftar Hadir & Agenda */
:root{--lms-topbar-height:82px;--bk-soft:#fff7f2;--bk-line:#ead3c8;--bk-text:#3c261e;--bk-muted:#7b665d;--bk-success:#2e7d57;--bk-danger:#9a4238;--bk-shadow:0 12px 32px rgba(77,43,33,.07)}

/* 1. Header utama tetap terlihat saat halaman digulir */
.app-topbar{position:sticky!important;top:0;z-index:1050;background:rgba(255,248,243,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(111,61,45,.10);box-shadow:0 8px 22px rgba(74,42,29,.045);padding-top:10px;padding-bottom:10px}
.classroom-tabs{display:flex;flex-wrap:nowrap!important;position:sticky;top:calc(var(--lms-topbar-height) + 6px);z-index:920;background:rgba(255,248,243,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px;border:1px solid rgba(111,61,45,.12);border-radius:14px;box-shadow:0 9px 24px rgba(74,42,29,.05);overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.classroom-tabs a{white-space:nowrap}

/* 2. Login password visibility */
.password-field-wrap{position:relative;display:flex;align-items:center;margin-top:6px}
.password-field-wrap input{width:100%;padding-right:88px!important}
.password-visibility-button{position:absolute;right:7px;top:50%;transform:translateY(-50%);min-width:68px;height:34px;padding:0 10px;border:1px solid #dfc9bd;border-radius:9px;background:#fff8f3;color:#6f3d2d;font-size:11px;font-weight:850;cursor:pointer}
.password-visibility-button:hover,.password-visibility-button:focus-visible{border-color:#bf603a;background:#fff1e8;outline:none}

/* 3. BK general */
.bk-page{display:grid;gap:18px}.bk-hero,.bk-student-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px;border:1px solid var(--bk-line);border-radius:22px;background:linear-gradient(135deg,#fff9f5,#f8e4da);box-shadow:var(--bk-shadow)}
.bk-hero h2,.bk-student-hero h2{margin:4px 0 7px;font-size:clamp(24px,3vw,34px)}.bk-hero p,.bk-student-hero p{margin:0;color:var(--bk-muted);line-height:1.6}.bk-filter-card{padding:14px!important}
.bk-filter-grid,.bk-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.bk-field{display:grid;gap:6px;min-width:0}.bk-field-grow{grid-column:span 1}.bk-field.full,.bk-form-actions.full,.bk-check.full{grid-column:1/-1}.bk-field>span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#806257}
.bk-field input,.bk-field select,.bk-field textarea,.bk-mini-form input,.bk-mini-form select,.bk-mini-form textarea{width:100%;border:1px solid #dec8be;border-radius:12px;background:#fff;padding:11px 12px;color:var(--bk-text);font:inherit;transition:border .16s ease,box-shadow .16s ease,background .16s ease}.bk-field input,.bk-field select{min-height:44px}.bk-field textarea{resize:vertical;line-height:1.55}.bk-field input:focus,.bk-field select:focus,.bk-field textarea:focus,.bk-mini-form input:focus,.bk-mini-form select:focus,.bk-mini-form textarea:focus{outline:none;border-color:#bf603a;box-shadow:0 0 0 4px rgba(191,96,58,.10);background:#fff}
.bk-filter-actions,.bk-form-actions{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.button.ghost{background:#fff;color:#6f3d2d;border:1px solid #ddc7bc}.button.danger{background:#9a4238;color:#fff}.button.compact{padding:8px 11px;min-height:auto;font-size:11px}.bk-check{display:flex;align-items:center;gap:8px;font-weight:750;color:var(--bk-text)}
.bk-student-list{display:grid;gap:8px}.bk-student-row{display:grid;grid-template-columns:minmax(240px,1fr) auto 28px;gap:16px;align-items:center;padding:12px 14px;border:1px solid #eedfd7;border-radius:15px;text-decoration:none;color:var(--bk-text);background:#fff;transition:.16s ease}.bk-student-row:hover{border-color:#d9aa95;background:#fffaf7;transform:translateY(-1px);box-shadow:0 8px 20px rgba(77,43,33,.055)}
.bk-student-main{display:flex;align-items:center;gap:12px;min-width:0}.bk-student-main>div{min-width:0}.bk-student-main strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-student-main small{display:block;margin-top:3px;color:var(--bk-muted)}.bk-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;background:#f5ded2;color:#8d472d;font-weight:900}.bk-avatar.large{width:58px;height:58px;border-radius:18px;font-size:20px}.bk-student-metrics{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.bk-student-metrics span{display:grid;gap:1px;text-align:center;min-width:70px;padding:6px 9px;border-radius:10px;background:#f8f2ee;color:#6f5a51;font-size:10px}.bk-student-metrics b{font-size:15px;color:#4a332a}.bk-student-metrics .achievement{background:#edf8f2;color:#2c684c}.bk-student-metrics .violation{background:#fff0ed;color:#8b4339}.bk-row-arrow{font-size:20px;color:#a86a50}.bk-empty{padding:28px;text-align:center;border:1px dashed #dcbdae;border-radius:14px;background:#fffaf7;color:var(--bk-muted)}
.bk-score-cards{display:flex;gap:10px}.bk-score-cards>div{min-width:130px;padding:13px 16px;border-radius:15px;background:#edf8f2;border:1px solid #cfe9da}.bk-score-cards>div.violation{background:#fff0ed;border-color:#efd0c9}.bk-score-cards span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:850;color:#5c7568}.bk-score-cards .violation span{color:#956158}.bk-score-cards strong{display:block;margin-top:4px;font-size:28px}.bk-two-column{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:16px;align-items:start}
.bk-compose{margin:0 0 14px;padding:12px;border:1px solid #ead7cd;border-radius:15px;background:#fffaf7}.bk-compose>summary,.bk-inline-edit>summary{cursor:pointer;font-weight:900;color:#8f4b32;list-style:none}.bk-compose>summary::-webkit-details-marker,.bk-inline-edit>summary::-webkit-details-marker{display:none}.bk-compose[open]>summary{margin-bottom:12px}.bk-timeline,.bk-point-list{display:grid;gap:10px}.bk-note-card{padding:14px;border:1px solid #ebddd6;border-radius:15px;background:#fff}.bk-note-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.bk-note-head>div{display:grid;gap:3px}.bk-date{font-size:10px;font-weight:850;color:#8a7268}.bk-note-card p{white-space:pre-wrap;line-height:1.55;color:#4f3b33}.bk-follow-up{display:grid;gap:4px;padding:10px 11px;margin:9px 0;border-radius:11px;background:#f7f2ef}.bk-follow-up b{font-size:10px;text-transform:uppercase;letter-spacing:.07em}.bk-follow-up span{font-size:12px;line-height:1.5}.bk-note-card>small{color:var(--bk-muted)}.bk-inline-edit{margin-top:10px;padding-top:9px;border-top:1px solid #f0e4de}.bk-inline-edit[open]>summary{margin-bottom:10px}
.status-chip.open{background:#fff2d8;color:#805d16}.status-chip.follow_up{background:#eef1ff;color:#455a96}.status-chip.completed{background:#e8f6ed;color:#286643}
.bk-point-card{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:11px;align-items:center;padding:12px;border:1px solid #eaded8;border-radius:14px;background:#fff}.bk-point-card.achievement{border-left:4px solid #4e9a70}.bk-point-card.violation{border-left:4px solid #b7584b}.bk-point-value{width:58px;height:58px;border-radius:13px;display:grid;place-items:center;align-content:center;background:#f3f6f4}.bk-point-value strong{font-size:20px;line-height:1}.bk-point-value span{font-size:9px;color:var(--bk-muted)}.bk-point-body{display:grid;gap:3px;min-width:0}.bk-point-body>strong{font-size:13px}.bk-point-body>small{font-size:10px;color:var(--bk-muted)}.bk-point-meta{display:flex;gap:8px;align-items:center;font-size:9px;color:var(--bk-muted)}.bk-point-meta b{padding:3px 6px;border-radius:999px;background:#f7eee9;color:#7a4c3b}.bk-point-actions{position:relative}.bk-point-actions>summary{cursor:pointer;list-style:none;padding:6px 8px;border-radius:8px;font-weight:900}.bk-point-actions>summary::-webkit-details-marker{display:none}.bk-action-popover{position:absolute;right:0;top:34px;z-index:50;width:min(340px,80vw);padding:12px;background:#fff;border:1px solid var(--bk-line);border-radius:14px;box-shadow:0 18px 46px rgba(65,35,26,.18)}.bk-mini-form{display:grid;gap:8px;margin-bottom:8px}.bk-mini-form label{display:grid;gap:4px;font-size:10px;font-weight:850;color:#765e55}.bk-mini-form input,.bk-mini-form select,.bk-mini-form textarea{padding:8px 9px;border-radius:9px}.bk-category-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px}.bk-category-card{padding:15px;border:1px solid #e7d8d0;border-radius:16px;background:#fff}.bk-category-card.achievement{border-top:4px solid #4e9a70}.bk-category-card.violation{border-top:4px solid #b7584b}.bk-category-card.inactive{opacity:.62}.bk-category-head{display:flex;justify-content:space-between;gap:10px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--bk-muted)}.bk-category-card h4{margin:9px 0 6px}.bk-category-card p{min-height:42px;color:var(--bk-muted);font-size:12px;line-height:1.5}.bk-category-card>small{font-size:10px;color:var(--bk-muted)}

/* 4. Daftar Hadir & Agenda */
.attendance-agenda-page{min-width:0}.attendance-agenda-info{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 15px!important}.attendance-agenda-info>div{display:grid;gap:3px}.attendance-agenda-info span{font-size:11px;color:var(--bk-muted)}.attendance-scroll-hint{white-space:nowrap}.attendance-agenda-panel{padding:0!important;overflow:hidden}.attendance-agenda-scroll{width:100%;overflow-x:auto;overflow-y:visible;overscroll-behavior-inline:contain;scrollbar-width:thin}.attendance-agenda-table{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%;background:#fff}.attendance-agenda-table th,.attendance-agenda-table td{border-right:1px solid #eee2dc;border-bottom:1px solid #eee2dc;padding:9px 10px;text-align:center;vertical-align:middle}.attendance-agenda-table thead th{background:#fff8f4;font-size:11px;font-weight:900}.student-sticky-col{position:sticky;left:0;z-index:6;min-width:220px;max-width:260px;text-align:left!important;background:#fff!important;box-shadow:7px 0 12px -12px rgba(58,31,22,.55)}thead .student-sticky-col{z-index:9;background:#fff3ec!important}.student-sticky-col strong{display:block;white-space:normal}.student-sticky-col small{display:block;margin-top:3px;color:var(--bk-muted);font-weight:600}.summary-sticky-col{position:sticky;right:0;z-index:6;min-width:210px;background:#fff!important;box-shadow:-7px 0 12px -12px rgba(58,31,22,.55)}thead .summary-sticky-col{z-index:9;background:#fff3ec!important}.meeting-col{width:150px;min-width:150px;max-width:150px}.meeting-date{font-size:12px;color:#4d342b}.meeting-col>small{display:block;margin:2px 0 6px;color:#8b746a}.meeting-topic{min-height:38px;display:flex;align-items:center;justify-content:center;white-space:normal;line-height:1.3;font-size:10px;color:#6b554c}.meeting-edit-button{display:inline-flex;margin-top:6px;padding:5px 9px;border:1px solid #dfc9bd;border-radius:8px;background:#fff;color:#985136;text-decoration:none;font-size:9px;font-weight:900}.meeting-edit-button:hover{background:#fff0e8;border-color:#c9876e}.attendance-cell{min-width:70px}.attendance-code{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:950;background:#f3efec;color:#625048}.status-present .attendance-code{background:#e7f6ec;color:#286643}.status-permission .attendance-code{background:#eef2ff;color:#49609b}.status-sick .attendance-code{background:#fff5d9;color:#80651d}.status-absent .attendance-code{background:#ffebe7;color:#963d34}.status-late .attendance-code{background:#f9e9d7;color:#9a5b20}.attendance-cell small{display:block;margin-top:3px;font-size:8px;color:#8a7268}.attendance-note-dot{font-size:17px;line-height:10px;color:#a05b3e}.attendance-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.attendance-summary span{padding:5px 3px;border-radius:7px;background:#f7f2ef;font-size:9px;color:#735f56}.attendance-summary b{display:block;margin-top:2px;font-size:12px;color:#3f2b24}

@media(max-width:1100px){.bk-two-column{grid-template-columns:1fr}.bk-category-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}}
@media(max-width:760px){:root{--lms-topbar-height:76px}.app-topbar{padding-top:8px;padding-bottom:8px}.classroom-tabs{top:calc(var(--lms-topbar-height) + 4px)}.bk-hero,.bk-student-hero{display:grid}.bk-filter-grid,.bk-form-grid{grid-template-columns:1fr 1fr}.bk-field.full,.bk-form-actions.full,.bk-check.full{grid-column:1/-1}.bk-student-row{grid-template-columns:1fr 24px}.bk-student-metrics{grid-column:1/-1;justify-content:flex-start}.bk-row-arrow{grid-column:2;grid-row:1}.bk-score-cards{width:100%}.bk-score-cards>div{flex:1;min-width:0}.bk-category-grid{grid-template-columns:1fr}.attendance-agenda-info{display:grid}.attendance-scroll-hint{white-space:normal}.student-sticky-col{min-width:185px;max-width:210px}.summary-sticky-col{min-width:185px}}
@media(max-width:520px){.bk-filter-grid,.bk-form-grid{grid-template-columns:1fr}.bk-field.full,.bk-form-actions.full,.bk-check.full{grid-column:1}.bk-score-cards{display:grid;grid-template-columns:1fr 1fr}.bk-point-card{grid-template-columns:55px 1fr auto}.password-visibility-button{min-width:62px}.student-sticky-col{min-width:165px;max-width:185px}.summary-sticky-col{min-width:174px}.meeting-col{width:135px;min-width:135px;max-width:135px}}