/* ============================================================ INCEPTION V18 FINAL REGISTER RIGHT ONLY LEFT AUTH TIDAK DISENTUH ============================================================ */ /* ============================================================ STEP 1 VISUAL ORDER LOCK ============================================================ */ #inception-register-v50-host .v50-grid{ display:grid!important; grid-template-columns: minmax(0,1fr) minmax(0,1fr)!important; gap: 11px 16px!important; } /* * ROW 1 * Email | Nama Ketua */ #inception-register-v50-host .v50-grid > label:has( input[data-root="email"] ){ order: 10!important; } #inception-register-v50-host .v18-leader-name-field{ order: 20!important; } /* * ROW 2 * Password | Confirm */ #inception-register-v50-host .v50-grid > label:has( input[data-root="password"] ){ order: 30!important; } #inception-register-v50-host .v50-grid > label:has( input[data-root="confirmPassword"] ){ order: 40!important; } /* * ROW 3 * WhatsApp | NIS/NISN */ #inception-register-v50-host .v50-grid > label:has( input[data-root="leaderPhone"] ){ order: 50!important; } #inception-register-v50-host .v18-leader-nisn-field{ order: 60!important; } /* * ROW 4 * Nama Tim | Provinsi */ #inception-register-v50-host .v50-grid > label:has( input[data-root="teamName"] ){ order: 70!important; } #inception-register-v50-host .v50-grid > label:has( #v50-province ){ order: 80!important; } /* * ROW 5 * Kota | Sekolah */ #inception-register-v50-host .v50-grid > label:has( #v50-city ){ order: 90!important; } #inception-register-v50-host .v50-grid > label:has( #v50-school ), #inception-register-v50-host .v50-grid > label:has( #v50-school-manual ){ order: 100!important; } /* * Sekolah normal = satu kolom. */ #inception-register-v50-host .v50-grid > label:has( #v50-school ){ grid-column: auto!important; } /* * Sekolah manual = FULL WIDTH. */ #inception-register-v50-host .v50-grid > label:has( #v50-school-manual ){ grid-column: 1 / -1!important; } /* ============================================================ NEW LEADER INPUT ============================================================ */ #inception-register-v50-host .v18-leader-name-field, #inception-register-v50-host .v18-leader-nisn-field{ min-width: 0!important; } #inception-register-v50-host .v18-leader-name-field > span, #inception-register-v50-host .v18-leader-nisn-field > span{ display:block!important; margin: 0 0 7px!important; color: #354058!important; font-size: 10.5px!important; line-height: 1.2!important; font-weight: 700!important; } #inception-register-v50-host .v18-leader-name-field input, #inception-register-v50-host .v18-leader-nisn-field input{ width: 100%!important; height: 49px!important; min-height: 49px!important; box-sizing: border-box!important; padding: 0 14px!important; border: 1px solid #dce3ef!important; border-radius: 11px!important; outline: 0!important; background: #ffffff!important; color: #27324b!important; font-size: 12px!important; font-weight: 550!important; box-shadow: 0 1px 2px rgba(27,39,66,.02)!important; transition: border-color .15s ease, box-shadow .15s ease!important; } #inception-register-v50-host .v18-leader-name-field input:focus, #inception-register-v50-host .v18-leader-nisn-field input:focus{ border-color: #718dd9!important; box-shadow: 0 0 0 3px rgba(78,108,197,.09)!important; } #inception-register-v50-host .v18-leader-name-field input::placeholder, #inception-register-v50-host .v18-leader-nisn-field input::placeholder{ color: #98a2b7!important; opacity: 1!important; } /* ============================================================ ACTIVE / DISABLED FIELD CONSISTENCY ============================================================ */ #inception-register-v50-host .v50-grid input:not(:disabled){ background: #ffffff!important; } #inception-register-v50-host .v50-grid input:disabled{ background: #f4f6fa!important; color: #99a2b3!important; cursor: not-allowed!important; } /* ============================================================ DROPDOWN EXACT CLASSES ONLY ============================================================ */ #inception-register-v50-host .v50-searchable{ position: relative!important; min-width: 0!important; } /* * Chevron ONLY. * Jangan styling seluruh button di searchable. */ #inception-register-v50-host .v50-search-toggle{ position:absolute!important; top:50%!important; right:9px!important; width: 30px!important; min-width: 30px!important; height: 30px!important; min-height: 30px!important; display:grid!important; place-items:center!important; margin: 0!important; padding: 0!important; transform: translateY(-50%)!important; border: 0!important; border-radius: 8px!important; outline: 0!important; background: transparent!important; color: #6c82bc!important; box-shadow: none!important; font-size: 16px!important; line-height: 1!important; cursor: pointer!important; } #inception-register-v50-host .v50-search-toggle:hover{ background: #f4f6fb!important; } /* MENU */ #inception-register-v50-host .v50-search-menu{ position: absolute!important; top: calc(100% + 7px)!important; left: 0!important; right: 0!important; z-index: 999999!important; width: 100%!important; min-width: 100%!important; max-width: 100%!important; max-height: 205px!important; margin: 0!important; padding: 6px!important; box-sizing: border-box!important; overflow-x: hidden!important; overflow-y: auto!important; border: 1px solid #dce3ed!important; border-radius: 11px!important; background: #ffffff!important; box-shadow: 0 16px 34px rgba(37,52,85,.14)!important; text-align: left!important; scrollbar-width: thin!important; scrollbar-color: #cbd3df transparent!important; } #inception-register-v50-host .v50-search-menu:not(.open){ display: none!important; } #inception-register-v50-host .v50-search-menu.open{ display: block!important; } /* ============================================================ DROPDOWN OPTION ============================================================ */ #inception-register-v50-host .v50-search-menu > .v50-menu-item{ position: relative!important; inset: auto!important; width: 100%!important; min-width: 100%!important; max-width: 100%!important; height: auto!important; min-height: 40px!important; display:flex!important; flex-direction: column!important; align-items: flex-start!important; justify-content: center!important; gap: 2px!important; margin: 0 0 2px!important; padding: 8px 11px!important; box-sizing: border-box!important; transform: none!important; border: 0!important; border-radius: 8px!important; outline: 0!important; background: #ffffff!important; color: #344057!important; box-shadow: none!important; text-align: left!important; cursor: pointer!important; } #inception-register-v50-host .v50-search-menu > .v50-menu-item:hover{ background: #f2f5ff!important; color: #4260b7!important; } #inception-register-v50-host .v50-menu-title{ display:block!important; width: 100%!important; min-width: 0!important; overflow: hidden!important; color: inherit!important; font-size: 11.5px!important; line-height: 1.35!important; font-weight: 650!important; text-align: left!important; text-overflow: ellipsis!important; white-space: nowrap!important; } #inception-register-v50-host .v50-menu-sub{ display:block!important; width: 100%!important; min-width: 0!important; overflow: hidden!important; color: #8d96a8!important; font-size: 9px!important; line-height: 1.3!important; font-weight: 500!important; text-align: left!important; text-overflow: ellipsis!important; white-space: nowrap!important; } /* SCHOOL MANUAL OPTION */ #inception-register-v50-host .v50-search-menu > .v50-menu-manual{ min-height: 48px!important; display:grid!important; grid-template-columns: 26px minmax(0,1fr)!important; align-items:center!important; gap: 9px!important; margin-top: 4px!important; border-top: 1px solid #edf0f5!important; border-radius: 0 0 8px 8px!important; } #inception-register-v50-host .v50-menu-manual-icon{ width: 25px!important; height: 25px!important; display:grid!important; place-items:center!important; border-radius: 7px!important; background: #eef2ff!important; color: #5570c3!important; font-size: 15px!important; font-weight: 700!important; } /* EMPTY */ #inception-register-v50-host .v50-menu-empty{ padding: 13px 11px!important; color: #939cad!important; font-size: 10px!important; line-height: 1.4!important; text-align: left!important; } /* SCROLLBAR */ #inception-register-v50-host .v50-search-menu::-webkit-scrollbar{ width: 6px!important; } #inception-register-v50-host .v50-search-menu::-webkit-scrollbar-track{ background: transparent!important; } #inception-register-v50-host .v50-search-menu::-webkit-scrollbar-thumb{ border-radius: 999px!important; background: #cbd3df!important; } /* ============================================================ STEP 2 ============================================================ */ /* * Summary lama: * "Total peserta / Ubah jumlah" * disembunyikan karena sekarang selector 3/4/5 * tampil langsung. */ #inception-register-v50-host .v15-members-screen > .v15-team-summary{ display: none!important; } #inception-register-v50-host .v18-team-size{ margin-bottom: 13px!important; } #inception-register-v50-host .v15-members-screen .v15-member-row{ grid-template-columns: 90px minmax(0,1fr) minmax(0,1fr)!important; } /* ============================================================ SMALL SCREEN HEIGHT ============================================================ */ @media (min-width:761px) and (max-height:850px){ #inception-register-v50-host .v50-grid{ gap: 8px 14px!important; } #inception-register-v50-host .v18-leader-name-field input, #inception-register-v50-host .v18-leader-nisn-field input{ height: 44px!important; min-height: 44px!important; } #inception-register-v50-host .v50-search-menu{ max-height: 170px!important; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:760px){ #inception-register-v50-host .v50-grid{ grid-template-columns: 1fr!important; } #inception-register-v50-host .v50-grid > label{ grid-column: 1!important; } #inception-register-v50-host .v15-members-screen .v15-member-row{ grid-template-columns: 1fr!important; } }