/* Design match pass: the phone-column screens on a computer. The app shell lives in components.css. Loaded after the older sheets so it wins. */

/* selects and date/time fields: arrow and icon sit inside the field with space, not on the far edge */
select{-webkit-appearance:none;appearance:none;background-color:var(--kl-card);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317402F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 16px center;background-size:16px;padding-right:44px!important;text-overflow:ellipsis}
input[type=date],input[type=time]{padding-right:14px;min-width:0}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{margin-left:8px;margin-right:2px;padding:6px;cursor:pointer;opacity:.7;border-radius:8px}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--kl-green-light)}
input[type=search]::-webkit-search-cancel-button{margin-right:4px}
input[type=number]{-moz-appearance:textfield}

/* ===== Screens that were drawn as a phone column: proper layouts on a computer (>= 1024px) ===== */
@media(min-width:1024px){
  /* Persiapan checklist */
  .ct-prepage{max-width:900px}.ct-items{grid-template-columns:1fr 1fr}
  .ct-pfoot{position:static}.ct-pfoot .dc-solid{max-width:420px}
}